docs: nuxt3 example (#170)

Author: DamianOsipiuk

docs/guides/ssr.md

@@ -1,20 +1,63 @@
-Vue Query supports two ways of prefetching data on the server and passing that to the queryClient.
-
-- Prefetch the data yourself and pass it in as `initialData`
-  - Quick to set up for simple cases
-  - Has some caveats
-- Prefetch the query on the server, dehydrate the cache and rehydrate it on the client
-  - Requires slightly more setup up front
+Vue Query supports prefetching multiple queries on the server and then _dehydrating_ those queries to the queryClient. This means the server can prerender markup that is immediately available on page load and as soon as JS is available, Vue Query can upgrade or _hydrate_ those queries with the full functionality of the library. This includes refetching those queries on the client if they have become stale since the time they were rendered on the server.
 
 ## Using Nuxt.js
 
-### Using Hydration
+### Nuxt 3
+
+First create `vue-query.ts` file in your `plugins` directory with following content:
+```ts
+import {
+  VueQueryPlugin,
+  VueQueryPluginOptions,
+  QueryClient,
+  hydrate,
+  dehydrate,
+} from "vue-query";
+
+export default (nuxt) => {
+  // Modify your Vue Query global settings here
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { staleTime: 1000 } },
+  });
+  const options: VueQueryPluginOptions = { queryClient };
+
+  nuxt.vueApp.use(VueQueryPlugin, options);
+
+  // @ts-expect-error Nuxt process variable
+  if (process.server) {
+    nuxt.hooks.hook("app:rendered", () => {
+      nuxt.nuxtState["vue-query"] = dehydrate(queryClient);
+    });
+  }
+
+  // @ts-expect-error Nuxt process variable
+  if (process.client) {
+    nuxt.hooks.hook("app:created", () => {
+      hydrate(queryClient, nuxt.nuxtState["vue-query"]);
+    });
+  }
+};
+```
+
+Then use query in your component
 
-Vue Query supports prefetching multiple queries on the server in Nuxt.js and then _dehydrating_ those queries to the queryClient. This means the server can prerender markup that is immediately available on page load and as soon as JS is available, Vue Query can upgrade or _hydrate_ those queries with the full functionality of the library. This includes refetching those queries on the client if they have become stale since the time they were rendered on the server.
+```ts
+export default defineComponent({
+  setup() {
+    const { data, suspense } = useQuery("test", fetcher);
+
+    onServerPrefetch(async () => {
+      await suspense();
+    });
+
+    return { data };
+  },
+});
+```
 
-To support caching queries on the server and set up hydration:
+### Nuxt 2
 
-- Use `useNuxtQueryProvider` inside setup function of your layout component
+Use `useNuxtQueryProvider` inside setup function of your layout component
 
 ```js
 // layouts/default.vue

examples/nuxt3-simple/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+*.log
+.nuxt
+nuxt.d.ts
+.output
+.env

examples/nuxt3-simple/README.md

@@ -0,0 +1,29 @@
+# Nuxt 3 Minimal Starter
+
+We recommend to look at the [documentation](https://v3.nuxtjs.org).
+
+## Setup
+
+Make sure to install the dependencies
+
+```bash
+yarn install
+```
+
+## Development
+
+Start the development server on http://localhost:3000
+
+```bash
+yarn dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+yarn build
+```
+
+Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment).

examples/nuxt3-simple/app.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>{{ data }}</div>
+</template>
+
+<script lang="ts">
+import { useQuery } from "vue-query";
+import { defineComponent, onServerPrefetch } from "vue";
+
+interface Post {
+  userId: number;
+  id: number;
+  title: string;
+  body: string;
+}
+
+const fetcher = async (): Promise<Post[]> =>
+  await fetch("https://jsonplaceholder.typicode.com/posts").then((response) =>
+    response.json()
+  );
+
+export default defineComponent({
+  setup() {
+    const { data, suspense } = useQuery("test", fetcher);
+
+    onServerPrefetch(async () => {
+      await suspense();
+    });
+
+    return { data };
+  },
+});
+</script>

examples/nuxt3-simple/nuxt.config.ts

@@ -0,0 +1,4 @@
+import { defineNuxtConfig } from "nuxt3";
+
+// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
+export default defineNuxtConfig({});

examples/nuxt3-simple/package.json

@@ -0,0 +1,14 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "nuxi dev",
+    "build": "nuxi build",
+    "start": "node .output/server/index.mjs"
+  },
+  "devDependencies": {
+    "nuxt3": "latest"
+  },
+  "dependencies": {
+    "vue-query": ">=1.0.0"
+  }
+}

examples/nuxt3-simple/plugins/plugin.ts

@@ -0,0 +1,31 @@
+import {
+  VueQueryPlugin,
+  VueQueryPluginOptions,
+  QueryClient,
+  hydrate,
+  dehydrate,
+} from "vue-query";
+
+export default (nuxt) => {
+  // Modify your Vue Query global settings here
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { staleTime: 1000 } },
+  });
+  const options: VueQueryPluginOptions = { queryClient };
+
+  nuxt.vueApp.use(VueQueryPlugin, options);
+
+  // @ts-expect-error Nuxt process variable
+  if (process.server) {
+    nuxt.hooks.hook("app:rendered", () => {
+      nuxt.nuxtState["vue-query"] = dehydrate(queryClient);
+    });
+  }
+
+  // @ts-expect-error Nuxt process variable
+  if (process.client) {
+    nuxt.hooks.hook("app:created", () => {
+      hydrate(queryClient, nuxt.nuxtState["vue-query"]);
+    });
+  }
+};

examples/nuxt3-simple/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://v3.nuxtjs.org/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}