docs: add vite-ssr example and docs (#76)

Author: frandiox

docs/_sidebar.md

@@ -13,6 +13,7 @@
   - [Suspense (experimental)](examples/suspense.md)
   - [Vue 2.x (experimental)](examples/vue-2.x.md)
   - [Nuxt.js (experimental)](examples/nuxt.md)
+  - [Vite SSR (experimental)](examples/vite-ssr.md)
 
 - Guides & Concepts
 

docs/examples/vite-ssr.md

@@ -0,0 +1,7 @@
+- [Open in Codesandbox](https://codesandbox.io/s/github/frandiox/vite-ssr-vue-query/tree/main/)
+- [View Source](https://github.com/frandiox/vite-ssr-vue-query)
+
+<iframe src="https://codesandbox.io/embed/github/frandiox/vite-ssr-vue-query/tree/main?hidenavigation=1&view=preview&codemirror=1"
+  style="height:700px; border:0; overflow:hidden;"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+></iframe>

docs/guides/ssr.md

@@ -88,6 +88,99 @@ export default defineComponent({
 
 As demonstrated, it's fine to prefetch some queries and let others fetch on the queryClient. This means you can control what content server renders or not by adding or removing `prefetchQuery` for a specific query.
 
+## Using Vite SSR
+
+Pass VueQuery client cache to [vite-ssr](https://github.com/frandiox/vite-ssr) in order to serialize the state in the DOM:
+
+```js
+// main.js (entry point)
+import App from "./App.vue";
+import viteSSR from "vite-ssr/vue";
+import { QueryClient, hydrate, dehydrate } from "vue-query";
+
+export default viteSSR(
+  App,
+  {
+    routes: [
+      /* ... */
+    ],
+    transformState(state, defaultTransformer) {
+      if (import.meta.env.SSR) {
+        // Dehydrate client cache in server
+        state.vueQuery = dehydrate(state.vueQuery);
+      }
+
+      return defaultTransformer(state);
+    },
+  },
+  // This is Vite SSR main hook, which is called once per request.
+  // Use it to set up Vue Query Client:
+  ({ initialState }) => {
+    // Create VueQuery client
+    const client = new QueryClient();
+
+    // Hydrate existing state in browser
+    if (!import.meta.env.SSR) hydrate(client, initialState.vueQuery);
+
+    // Save reference to the client
+    initialState.vueQuery = client;
+  }
+);
+```
+
+After that, provide the client in the root component using the saved reference to make it available globally:
+
+```html
+<!-- App.vue -->
+<template>
+  <div>
+    <RouterView />
+  </div>
+</template>
+
+<script>
+  import { useContext } from "vite-ssr/vue";
+  import { useQueryProvider } from "vue-query";
+
+  export default {
+    setup() {
+      const { initialState } = useContext();
+      useQueryProvider(initialState.vueQuery);
+    },
+  };
+</script>
+```
+
+Finally, call VueQuery from any component:
+
+```html
+<!-- MyComponent.vue -->
+<template>
+  <div>
+    <button @click="refetch">Refetch</button>
+    <p>{{ data }}</p>
+  </div>
+</template>
+
+<script>
+  import { useQuery } from "vue-query";
+  import { onServerPrefetch } from "vue";
+
+  export default {
+    setup() {
+      // This will be prefetched and sent from the server
+      const { refetch, data, suspense } = useQuery("todos", getTodos);
+      onServerPrefetch(suspense);
+
+      return {
+        refetch,
+        data,
+      };
+    },
+  };
+</script>
+```
+
 ## Tips, Tricks and Caveats
 
 ### Only successful queries are included in dehydration