fix

Author: galvez

docs/react/basic-setup.md

@@ -6,7 +6,7 @@
 
 The [starter template](https://github.com/fastify/fastify-dx/tree/dev/starters/react) follows [fastify-vite](https://github.com/fastify/fastify-vite)'s convention of having a `client` folder with an `index.js` file, which is automatically resolved as your `clientModule` setting. 
 
-If you want flat directory setup, where server and client files are mixed together, you can manually set `clientModule` to something else. Note that in this case you'll also need to update `root` in your `vite.config.js` file.
+If you want a flat directory setup, where server and client files are mixed together, you can manually set `clientModule` to something else. Note that in this case you'll also need to update `root` in your `vite.config.js` file.
 
 When deploying to production, bear in mind the `client/dist` directory, generated when you run `npm run build`, needs to be included. You'll also want to enable Fastify's [built-in logging](https://www.fastify.io/docs/latest/Reference/Logging/):
 

docs/react/project-structure.md

@@ -10,20 +10,20 @@ The [starter template](https://github.com/fastify/fastify-dx/tree/dev/starters/r
 ```
 ├── server.js
 ├── client/
-｜    ├── index.js
-｜    ├── context.js
-｜    ├── root.jsx
-｜    ├── index.html
-｜    ├── layouts/
-｜    ｜    ├── default.jsx
-｜    ｜    └── auth.jsx
-｜    └── pages/
-｜          ├── index.jsx
-｜          ├── client-only.jsx
-｜          ├── server-only.jsx
-｜          ├── streaming.jsx
-｜          ├── using-data.jsx
-｜          └── using-store.jsx
+│    ├── index.js
+│    ├── context.js
+│    ├── root.jsx
+│    ├── index.html
+│    ├── layouts/
+│    │    ├── default.jsx
+│    │    └── auth.jsx
+│    └── pages/
+│          ├── index.jsx
+│          ├── client-only.jsx
+│          ├── server-only.jsx
+│          ├── streaming.jsx
+│          ├── using-data.jsx
+│          └── using-store.jsx
 ├── vite.config.js
 └── package.json
 ```

docs/react/route-context.md

@@ -33,27 +33,29 @@ This example demonstrates how to use it to set up an universally available (SSR
 import ky from 'ky-universal'
 
 export default (ctx) => {
-  // This runs both on the server and on the 
-  // client, exactly once per HTTP request
-  ctx.message = 'Universal hello'
   if (ctx.server) {
-    // Place some server data on the
-    // application's global state
-    ctx.state = ctx.server.db
-    // It is automatically hydrated on the client
-    // So no need to any additional assignments here
+    // Populate state.todoList on the server
+    ctx.state.todoList = ctx.server.db.todoList
+    // It'll get automatically serialized to the client on first render!
   }
 }
 
 export const $fetch = ky.extend({
   prefixUrl: 'http://localhost:3000'
 })
 
-export async function addTodoItem (state, item) {
-  await $fetch.put('api/todo/items', {
-    body: { item },
-  })
-  state.todoList.push(item)
+// Must be a function so each request can have its own state
+export const state = () => ({
+  todoList: null,
+})
+
+export const actions = {
+  async addTodoItem (state, item) {
+    await $fetch.put('api/todo/items', {
+      json: { item },
+    })
+    state.todoList.push(item)
+  },
 }
 ```
 

docs/vue/route-context.md

@@ -33,27 +33,29 @@ This example demonstrates how to use it to set up an universally available (SSR
 import ky from 'ky-universal'
 
 export default (ctx) => {
-  // This runs both on the server and on the 
-  // client, exactly once per HTTP request
-  ctx.message = 'Universal hello'
   if (ctx.server) {
-    // Place some server data on the
-    // application's global state
-    ctx.state = ctx.server.db
-    // It is automatically hydrated on the client
-    // So no need to any additional assignments here
+    // Populate state.todoList on the server
+    ctx.state.todoList = ctx.server.db.todoList
+    // It'll get automatically serialized to the client on first render!
   }
 }
 
 export const $fetch = ky.extend({
   prefixUrl: 'http://localhost:3000'
 })
 
-export async function addTodoItem (state, item) {
-  await $fetch.put('api/todo/items', {
-    body: { item },
-  })
-  state.todoList.push(item)
+// Must be a function so each request can have its own state
+export const state = () => ({
+  todoList: null,
+})
+
+export const actions = {
+  async addTodoItem (state, item) {
+    await $fetch.put('api/todo/items', {
+      json: { item },
+    })
+    state.todoList.push(item)
+  },
 }
 ```