37 lines
923 B
TypeScript
37 lines
923 B
TypeScript
import type {
|
|
DehydratedState,
|
|
VueQueryPluginOptions,
|
|
} from '@tanstack/vue-query'
|
|
import {
|
|
VueQueryPlugin,
|
|
QueryClient,
|
|
hydrate,
|
|
dehydrate,
|
|
} from '@tanstack/vue-query'
|
|
// Nuxt 3 app aliases
|
|
import { defineNuxtPlugin, useState } from '#imports'
|
|
|
|
export default defineNuxtPlugin((nuxt) => {
|
|
const vueQueryState = useState<DehydratedState | null>('vue-query')
|
|
|
|
// Modify your Vue Query global settings here
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: { queries: { staleTime: 5000 } },
|
|
})
|
|
const options: VueQueryPluginOptions = { queryClient }
|
|
|
|
nuxt.vueApp.use(VueQueryPlugin, options)
|
|
|
|
if (import.meta.server) {
|
|
nuxt.hooks.hook('app:rendered', () => {
|
|
vueQueryState.value = dehydrate(queryClient)
|
|
})
|
|
}
|
|
|
|
if (import.meta.client && vueQueryState.value !== null) {
|
|
nuxt.hooks.hook('app:created', () => {
|
|
hydrate(queryClient, vueQueryState.value)
|
|
})
|
|
}
|
|
})
|