feat: implement Vue Query SSR

.vscode/settings.json

@@ -1,13 +1,17 @@
 {
   "prettier.enable": false,
-  "editor.formatOnSave": false,
+  "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
+  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
   "files.associations": {
     "*.css": "tailwindcss"
   },
   "editor.quickSuggestions": {
     "strings": true
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
   }
 }

pages/products.vue

@@ -3,12 +3,16 @@ import { useQuery } from '@tanstack/vue-query'
 
 const url = 'https://dummyjson.com/products'
 
-const { isLoading, isError, data, error } = useQuery({
+const { isLoading, isError, data, error, suspense } = useQuery({
   queryKey: ['products'],
   queryFn: () => {
     return fetch(url).then(res => res.json())
   },
 })
+
+onServerPrefetch(async () => {
+  await suspense()
+})
 </script>
 
 <template>

plugins/vue-query.ts

@@ -1,5 +1,27 @@
-import { VueQueryPlugin } from '@tanstack/vue-query'
+import type { DehydratedState, VueQueryPluginOptions } from '@tanstack/vue-query'
+import { QueryClient, VueQueryPlugin, dehydrate, hydrate } from '@tanstack/vue-query'
+import { useState } from '#app'
 
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.use(VueQueryPlugin)
+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 (process.server) {
+    nuxt.hooks.hook('app:rendered', () => {
+      vueQueryState.value = dehydrate(queryClient)
+    })
+  }
+
+  if (process.client) {
+    nuxt.hooks.hook('app:created', () => {
+      hydrate(queryClient, vueQueryState.value)
+    })
+  }
 })