52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
import type {
|
|
DehydratedState,
|
|
VueQueryPluginOptions,
|
|
} from '@tanstack/vue-query'
|
|
import { defineNuxtPlugin, useState } from '#imports'
|
|
import {
|
|
dehydrate,
|
|
hydrate,
|
|
QueryClient,
|
|
VueQueryPlugin,
|
|
} from '@tanstack/vue-query'
|
|
|
|
// импортируем Devtools
|
|
import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
|
|
|
|
export default defineNuxtPlugin((nuxt) => {
|
|
const vueQueryState = useState<DehydratedState | null>('vue-query')
|
|
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
retry: false,
|
|
refetchOnWindowFocus: false,
|
|
refetchOnMount: false,
|
|
},
|
|
mutations: {
|
|
retry: false,
|
|
},
|
|
},
|
|
})
|
|
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) {
|
|
nuxt.hooks.hook('app:created', () => {
|
|
hydrate(queryClient, vueQueryState.value)
|
|
|
|
// Монтируем Devtools только на клиенте
|
|
nuxt.vueApp.use(VueQueryDevtools, {
|
|
initialIsOpen: false, // открыть/закрыть по умолчанию
|
|
})
|
|
})
|
|
}
|
|
})
|