Auf dieser Seite
Benutzerdefinierter Client
Benutzerdefinierter Client
Vue Query ermöglicht die Bereitstellung eines benutzerdefinierten QueryClient für den Vue-Kontext.
Dies kann nützlich sein, wenn Sie einen QueryClient im Voraus erstellen müssen, um ihn mit anderen Bibliotheken zu integrieren, die keinen Zugriff auf den Vue-Kontext haben.
Aus diesem Grund akzeptiert VueQueryPlugin entweder QueryClientConfig oder QueryClient als Plugin-Optionen.
Wenn Sie QueryClientConfig bereitstellen, wird eine QueryClient-Instanz intern erstellt und dem Vue-Kontext zur Verfügung gestellt.
const vueQueryPluginOptions: VueQueryPluginOptions = {
queryClientConfig: {
defaultOptions: { queries: { staleTime: 3600 } },
},
}
app.use(VueQueryPlugin, vueQueryPluginOptions)
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)
const myClient = new QueryClient(queryClientConfig)
const vueQueryPluginOptions: VueQueryPluginOptions = {
queryClient: myClient,
}
app.use(VueQueryPlugin, vueQueryPluginOptions)
Benutzerdefinierter Kontextschlüssel
Sie können auch den Schlüssel anpassen, unter dem QueryClient im Vue-Kontext zugänglich ist. Dies kann nützlich sein, wenn Sie Namenskonflikte zwischen mehreren Apps auf derselben Seite mit Vue2 vermeiden möchten.
Es funktioniert sowohl mit dem Standard- als auch mit dem benutzerdefinierten QueryClient
const vueQueryPluginOptions: VueQueryPluginOptions = {
queryClientKey: 'Foo',
}
app.use(VueQueryPlugin, vueQueryPluginOptions)
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)
const myClient = new QueryClient(queryClientConfig)
const vueQueryPluginOptions: VueQueryPluginOptions = {
queryClient: myClient,
queryClientKey: 'Foo',
}
app.use(VueQueryPlugin, vueQueryPluginOptions)
Um den benutzerdefinierten Client-Schlüssel zu verwenden, müssen Sie ihn als Query-Option bereitstellen
useQuery({
queryKey: ['query1'],
queryFn: fetcher,
queryClientKey: 'foo',
})
useQuery({
queryKey: ['query1'],
queryFn: fetcher,
queryClientKey: 'foo',
})
Intern wird der benutzerdefinierte Schlüssel mit dem Standard-Query-Schlüssel als Suffix kombiniert. Aber der Benutzer muss sich darum keine Sorgen machen.
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
