vueUse useFetch() + useUrl()을 사용하여 URL로 작업하는 더 좋은 방법

URL을 다룰 때의 문제:

다음 URL을 고려하십시오.

"https://somedomain.com/api/v1/entity/:id/subentity?search=query&sort=property&limit=100&page=1&filters=filter1,filter2,filter3#someHash"

이 URL은 다음과 같이 구성되는 많은 부분이 있습니다.

기본 URL:https://somedomain.com

경로:/api/v1/entity/:id/subentity?search=query&sort=property&limit=100&page=1&someFilters=filter1,filter2,filter3#someHash

경로 변수:/:id/'

쿼리 매개변수:search sort limit page filters

해시 접미사:#someHash

쿼리 매개변수 또는 경로 변수를 변경하기 위해 문자열 보간법 또는 사용자 지정 코드만 사용하는 REST API/링크 작업은 매우 번거롭고 지루할 수 있습니다.
특히 VueUse에서 useFetch() 후크를 사용할 때 axios와 같은 라이브러리와 유사한 (매개변수, 경로 변수 등)을 처리할 내장 방법이 없기 때문입니다.

해결책:

이 문제를 편리한 방법으로 해결하는 Vue.js 구성 API 후크vue-useUrl를 만들었습니다.
useUrl()를 사용하여 이전 예제를 다시 실행해 보겠습니다.

const { url, queryParams, pathVariables, hash, path, disableCSV } = useUrl({ 
    path: '/api/v1/entity/:id/subentity',
    pathVariables: {
      id: 1001
    },
    queryParams: {
      search: 'query',
      sort: 'propery',
      limit: 100,
      page: 1,
      filters: [ 'filter1', 'filter2', 'filter3' ]
    },
    hash: 'someHash'
}, 
'https://somedomain.com')

console.log(url.value) // return https:/somedomain.com/api/v1/entity/0/subentity?search=query&sort=propery&limit=100&page=1&filters=filter1,filter2,filter3#someHash

쿼리 매개변수, 경로 변수, 해시, 경로를 자바스크립트 변수로 사용할 수 있으며 멋진 점은 이 변수의 값을 변경하면 URL 재구축이 트리거되고url 항상 쿼리 변경 사항을 반영한다는 것입니다.

useFetch()와 통합:

import { useFetch } from "@vueuse/core"
import { useUrl } from "vue-useurl"

export function useApi() {
  const { url, queryParams, pathVariables, path } = useUrl({ 
      path: '/users/random_user',
      queryParams: {
        size: 10
      },
      pathVariables: {},
      hash: ''
  }, 
  'https://random-data-api.com/api')

  const { isFetching, error, data } = useFetch<any[]>(
    url,
      { initialData: { results: [] }, refetch: true }
    )
    .get()
    .json()
  return {
    isFetching,
    error,
    data,
    url,
    queryParams,
    pathVariables,
    path
  }
}

NPM Package
Github repo