codecheck

1
import type {
2
  DehydratedState,
3
  VueQueryPluginOptions,
4
} from "@tanstack/vue-query";
5
import {
6
  VueQueryPlugin,
7
  QueryClient,
8
  hydrate,
9
  dehydrate,
10
} from "@tanstack/vue-query";
11
// Nuxt 3 app aliases
12
import { defineNuxtPlugin, useState } from "#imports";
13

14
export default defineNuxtPlugin((nuxt) => {
15
  const vueQueryState = useState<DehydratedState | null>("vue-query");
16

17
  // Modify your Vue Query global settings here
18
  const queryClient = new QueryClient({
19
    defaultOptions: { queries: { staleTime: 5000 } },
20
  });
21
  const options: VueQueryPluginOptions = { queryClient };
22

23
  nuxt.vueApp.use(VueQueryPlugin, options);
24

25
  if (process.server) {
26
    nuxt.hooks.hook("app:rendered", () => {
27
      vueQueryState.value = dehydrate(queryClient);
28
    });
29
  }
30

31
  if (process.client) {
32
    hydrate(queryClient, vueQueryState.value);
33
  }
34
});
35