自定义客户端
自定义客户端
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
