自定义客户端
自定义客户端
Vue Query 允许为 Vue 上下文提供自定义的 QueryClient。
当您需要预先创建 QueryClient 以便将其与其他无法访问 Vue 上下文的库集成时，这可能很方便。
因此，VueQueryPlugin 接受 QueryClientConfig 或 QueryClient 作为插件选项。
如果您提供 QueryClientConfig，QueryClient 实例将在内部创建并提供给 Vue 上下文。
tsx
const vueQueryPluginOptions: VueQueryPluginOptions = {
queryClientConfig: {
defaultOptions: { queries: { staleTime: 3600 } },
},
}
app.use(VueQueryPlugin, vueQueryPluginOptions)
const vueQueryPluginOptions: VueQueryPluginOptions = {
queryClientConfig: {
defaultOptions: { queries: { staleTime: 3600 } },
},
}
app.use(VueQueryPlugin, vueQueryPluginOptions)
tsx
const myClient = new QueryClient(queryClientConfig)
const vueQueryPluginOptions: VueQueryPluginOptions = {
queryClient: myClient,
}
app.use(VueQueryPlugin, vueQueryPluginOptions)
const myClient = new QueryClient(queryClientConfig)
const vueQueryPluginOptions: VueQueryPluginOptions = {
queryClient: myClient,
}
app.use(VueQueryPlugin, vueQueryPluginOptions)
自定义上下文键
您还可以自定义 QueryClient 在 Vue 上下文中可访问的键。如果您想避免在具有 Vue2 的同一页面上的多个应用程序之间发生名称冲突，这将非常有用。
它适用于默认的和自定义的 QueryClient
tsx
const vueQueryPluginOptions: VueQueryPluginOptions = {
queryClientKey: 'Foo',
}
app.use(VueQueryPlugin, vueQueryPluginOptions)
const vueQueryPluginOptions: VueQueryPluginOptions = {
queryClientKey: 'Foo',
}
app.use(VueQueryPlugin, vueQueryPluginOptions)
tsx
const myClient = new QueryClient(queryClientConfig)
const vueQueryPluginOptions: VueQueryPluginOptions = {
queryClient: myClient,
queryClientKey: 'Foo',
}
app.use(VueQueryPlugin, vueQueryPluginOptions)
const myClient = new QueryClient(queryClientConfig)
const vueQueryPluginOptions: VueQueryPluginOptions = {
queryClient: myClient,
queryClientKey: 'Foo',
}
app.use(VueQueryPlugin, vueQueryPluginOptions)
要使用自定义客户端密钥，您必须将其作为查询选项提供
js
useQuery({
queryKey: ['query1'],
queryFn: fetcher,
queryClientKey: 'foo',
})
useQuery({
queryKey: ['query1'],
queryFn: fetcher,
queryClientKey: 'foo',
})
在内部，自定义密钥将与默认查询密钥组合作为后缀。但用户不必担心它。
tsx
const vueQueryPluginOptions: VueQueryPluginOptions = {
queryClientKey: 'Foo',
}
app.use(VueQueryPlugin, vueQueryPluginOptions) // -> VUE_QUERY_CLIENT:Foo
const vueQueryPluginOptions: VueQueryPluginOptions = {
queryClientKey: 'Foo',
}
app.use(VueQueryPlugin, vueQueryPluginOptions) // -> VUE_QUERY_CLIENT:Foo
