From fe503aa1b9153a9385617e4bccb9ea996423021f Mon Sep 17 00:00:00 2001
From: Warsono <warsono16694@gmail.com>
Date: Mon, 9 Oct 2023 13:29:07 +0700
Subject: [PATCH] feat: implement Vue Query SSR

---
 .vscode/settings.json |  6 +++++-
 pages/products.vue    |  6 +++++-
 plugins/vue-query.ts  | 28 +++++++++++++++++++++++++---
 3 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index a36d617..502bb4f 100644
--- a/.vscode/settings.json
+++ b/.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"
   }
 }
\ No newline at end of file
diff --git a/pages/products.vue b/pages/products.vue
index d690feb..502ad70 100644
--- a/pages/products.vue
+++ b/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>
diff --git a/plugins/vue-query.ts b/plugins/vue-query.ts
index a3e62fb..64211ae 100644
--- a/plugins/vue-query.ts
+++ b/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)
+    })
+  }
 })