사용자 지정 클라이언트

사용자 지정 클라이언트

Vue Query에서는 Vue 컨텍스트에 사용자 지정 QueryClient를 제공할 수 있습니다.

Vue 컨텍스트에 접근할 수 없는 다른 라이브러리와 통합하기 위해 QueryClient를 미리 생성해야 할 때 유용할 수 있습니다.

이러한 이유로 VueQueryPlugin은 플러그인 옵션으로 QueryClientConfig 또는 QueryClient를 받습니다.

QueryClientConfig를 제공하면 내부적으로 QueryClient 인스턴스가 생성되어 Vue context에 제공됩니다.

const vueQueryPluginOptions: VueQueryPluginOptions = {
  queryClientConfig: {
    defaultOptions: { queries: { staleTime: 3600 } },
  },
}
app.use(VueQueryPlugin, vueQueryPluginOptions)

const myClient = new QueryClient(queryClientConfig)
const vueQueryPluginOptions: VueQueryPluginOptions = {
  queryClient: myClient,
}
app.use(VueQueryPlugin, vueQueryPluginOptions)

사용자 지정 컨텍스트 키

또한 Vue context에서 QueryClient에 접근할 때 사용할 키를 사용자 지정할 수 있습니다. 이는 Vue2를 사용해 동일한 페이지에서 여러 앱 간 이름 충돌을 방지하려는 경우 유용할 수 있습니다.

기본 및 사용자 지정 QueryClient 모두에서 작동합니다

const vueQueryPluginOptions: VueQueryPluginOptions = {
  queryClientKey: 'Foo',
}
app.use(VueQueryPlugin, vueQueryPluginOptions)

const myClient = new QueryClient(queryClientConfig)
const vueQueryPluginOptions: VueQueryPluginOptions = {
  queryClient: myClient,
  queryClientKey: 'Foo',
}
app.use(VueQueryPlugin, vueQueryPluginOptions)

사용자 지정 client key를 사용하려면 이를 쿼리 옵션으로 제공해야 합니다

useQuery({
  queryKey: ['query1'],
  queryFn: fetcher,
  queryClientKey: 'foo',
})

내부적으로 사용자 지정 키는 기본 쿼리 키에 접미사로 결합됩니다. 하지만 사용자는 이를 걱정할 필요가 없습니다.

const vueQueryPluginOptions: VueQueryPluginOptions = {
  queryClientKey: 'Foo',
}
app.use(VueQueryPlugin, vueQueryPluginOptions) // -> VUE_QUERY_CLIENT:Foo