UNPKG

@peterbud/nuxt-query

Version:

Nuxt integration for Tanstack Query

38 lines (37 loc) 1.2 kB
import { QueryClient, VueQueryPlugin, dehydrate, hydrate } from "@tanstack/vue-query"; import { defineNuxtPlugin, useRuntimeConfig, useState } from "#app"; export default defineNuxtPlugin({ name: "nuxt-query:plugin", async setup(nuxtApp) { const queryClientOptions = useRuntimeConfig().public.nuxtQuery?.queryClientOptions; let queryClient; let options; const getPluginOptions = (queryClientParam) => { queryClient = queryClientParam ?? new QueryClient(queryClientOptions); options = { queryClient }; }; await nuxtApp.callHook("nuxt-query:configure", getPluginOptions); if (!queryClient) queryClient = new QueryClient(queryClientOptions); if (!options) options = { queryClient, enableDevtoolsV6Plugin: true }; nuxtApp.vueApp.use(VueQueryPlugin, options); const vueQueryState = useState("vue-query-state"); if (import.meta.server) { nuxtApp.hooks.hook("app:rendered", () => { vueQueryState.value = dehydrate(queryClient); }); } if (import.meta.client) hydrate(queryClient, vueQueryState.value); return { provide: { queryClient } }; } });