From 698f3b1b4a93ced58ed9c1d1066fc57a652c452b Mon Sep 17 00:00:00 2001
From: Damian Osipiuk <osipiukd+git@gmail.com>
Date: Sun, 1 Sep 2024 22:54:07 +0200
Subject: [PATCH 1/2] docs: update SSR guide for nuxt2

---
 docs/framework/vue/guides/ssr.md | 35 +++++++++++++++++++++-----------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/docs/framework/vue/guides/ssr.md b/docs/framework/vue/guides/ssr.md
index d0933289125..b2be22cadcd 100644
--- a/docs/framework/vue/guides/ssr.md
+++ b/docs/framework/vue/guides/ssr.md
@@ -82,11 +82,14 @@ export default (context) => {
   const queryClient = new QueryClient({
     defaultOptions: { queries: { staleTime: 5000 } },
   })
-  const options = { queryClient }
 
-  Vue.use(VueQueryPlugin, options)
+  if (process.server) {
+    context.ssrContext.VueQuery = queryClient
+  }
 
   if (process.client) {
+    Vue.use(VueQueryPlugin, { queryClient })
+
     if (context.nuxtState && context.nuxtState.vueQueryState) {
       hydrate(queryClient, context.nuxtState.vueQueryState)
     }
@@ -100,7 +103,7 @@ Add this plugin to your `nuxt.config.js`
 module.exports = {
   ...
   plugins: ['~/plugins/vue-query.js'],
-};
+}
 ```
 
 Now you are ready to prefetch some data in your pages with `onServerPrefetch`.
@@ -110,7 +113,7 @@ Now you are ready to prefetch some data in your pages with `onServerPrefetch`.
 - Prefetch all the queries that you need with `queryClient.prefetchQuery` or `suspense`
 - Dehydrate `queryClient` to the `nuxtContext`
 
-```js
+```vue
 // pages/todos.vue
 <template>
   <div>
@@ -129,18 +132,26 @@ import { useQuery, useQueryClient, dehydrate } from "@tanstack/vue-query";
 
 export default defineComponent({
   setup() {
+    // Get QueryClient either from SSR context, or Vue context
+    const { ssrContext } = useContext()
+    // Make sure to provide `queryClient` as a second parameter to `useQuery` calls
+    const queryClient = (ssrContext != null && ssrContext.VueQuery) || useQueryClient()
+
     // This will be prefetched and sent from the server
-    const { refetch, data, suspense } = useQuery("todos", getTodos);
+    const { data, refetch, suspense } = useQuery({
+      queryKey: ['todos'],
+      queryFn: getTodos,
+    }, queryClient)
     // This won't be prefetched, it will start fetching on client side
-    const { data2 } = useQuery("todos2", getTodos);
-
-    const { ssrContext } = useContext();
-    const queryClient = useQueryClient();
+    const { data2 } = useQuery({
+      queryKey: "todos2",
+      queryFn: getTodos,
+    }, queryClient)
 
     onServerPrefetch(async () => {
-      await suspense();
-      ssrContext.nuxt.vueQueryState = dehydrate(queryClient);
-    });
+      await suspense()
+      ssrContext.nuxt.vueQueryState = dehydrate(queryClient)
+    })
 
     return {
       refetch,

From 3f82ad45eb7cd34d0803f49ce9d775d95e3172a1 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sun, 1 Sep 2024 21:10:57 +0000
Subject: [PATCH 2/2] ci: apply automated fixes

---
 docs/framework/vue/guides/ssr.md | 33 +++++++++++++++++++-------------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/docs/framework/vue/guides/ssr.md b/docs/framework/vue/guides/ssr.md
index b2be22cadcd..0ebb3e7d305 100644
--- a/docs/framework/vue/guides/ssr.md
+++ b/docs/framework/vue/guides/ssr.md
@@ -127,26 +127,33 @@ import {
   defineComponent,
   onServerPrefetch,
   useContext,
-} from "@nuxtjs/composition-api";
-import { useQuery, useQueryClient, dehydrate } from "@tanstack/vue-query";
+} from '@nuxtjs/composition-api'
+import { useQuery, useQueryClient, dehydrate } from '@tanstack/vue-query'
 
 export default defineComponent({
   setup() {
     // Get QueryClient either from SSR context, or Vue context
     const { ssrContext } = useContext()
     // Make sure to provide `queryClient` as a second parameter to `useQuery` calls
-    const queryClient = (ssrContext != null && ssrContext.VueQuery) || useQueryClient()
+    const queryClient =
+      (ssrContext != null && ssrContext.VueQuery) || useQueryClient()
 
     // This will be prefetched and sent from the server
-    const { data, refetch, suspense } = useQuery({
-      queryKey: ['todos'],
-      queryFn: getTodos,
-    }, queryClient)
+    const { data, refetch, suspense } = useQuery(
+      {
+        queryKey: ['todos'],
+        queryFn: getTodos,
+      },
+      queryClient,
+    )
     // This won't be prefetched, it will start fetching on client side
-    const { data2 } = useQuery({
-      queryKey: "todos2",
-      queryFn: getTodos,
-    }, queryClient)
+    const { data2 } = useQuery(
+      {
+        queryKey: 'todos2',
+        queryFn: getTodos,
+      },
+      queryClient,
+    )
 
     onServerPrefetch(async () => {
       await suspense()
@@ -156,9 +163,9 @@ export default defineComponent({
     return {
       refetch,
       data,
-    };
+    }
   },
-});
+})
 </script>
 ```