docs: fixed and simplified custom client example

enkot · Jun 18, 2024 · 797c374 · 797c374
1 parent 4a37fe3
commit 797c374
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 17 deletions.
diff --git a/docs/content/1.setup/2.configuration.md b/docs/content/1.setup/2.configuration.md
@@ -47,6 +47,6 @@ export default defineNuxtConfig({
 ```
 or:
 ```sh
-NUXT_PUBLIC_OPEN_FETCH_PETS_SCHEMA=https://petstore3.swagger.io/api/v3/openapi.json
-NUXT_PUBLIC_OPEN_FETCH_PETS_BASE_URL=https://petstore3.swagger.io/api/v3/
+NUXT_OPEN_FETCH_PETS_SCHEMA=https://petstore3.swagger.io/api/v3/openapi.json
+NUXT_OPEN_FETCH_PETS_BASE_URL=https://petstore3.swagger.io/api/v3/
 ```
diff --git a/docs/content/4.advanced/1.custom-client.md b/docs/content/4.advanced/1.custom-client.md
@@ -6,7 +6,7 @@ description: "NuxtOpenFetch uses Nuxt plugin to provide fetch clients to the app
 If you need to add non-serializable fetch options which can't be specified in the Nuxt config, such as `onRequest`, `onResponse` etc, you can create custom Nuxt plugin.
 
 First you need to disable the default plugin:
-```ts twoslash
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   openFetch: {
     disableNuxtPlugin: true,
@@ -16,24 +16,28 @@ export default defineNuxtConfig({
 ```
 
 For example if you need to add logging on each request:
-```ts
+```ts [plugins/openFetch.ts]
 export default defineNuxtPlugin({
   enforce: 'pre', // clients will be ready to use by other plugins, Pinia stores etc.
   setup() {
     const clients = useRuntimeConfig().public.openFetch
     const localFetch = useRequestFetch()
 
     return {
-      provide: Object.entries(clients).reduce((acc, [name, client]) => ({
+      provide: Object.entries(clients).reduce((acc, [name, options]) => ({
         ...acc,
-        [name]: createOpenFetch(localOptions => ({
-          ...options,
-          ...localOptions,
-          onRequest(ctx) {
-            console.log('My logging', ctx.request)
-            return localOptions?.onRequest?.(ctx)
-          }
-        }), localFetch)
+        [name]: createOpenFetch(options, localFetch)
+
+        // or add the logging:
+
+        // [name]: createOpenFetch(localOptions => ({
+        //   ...options,
+        //   ...localOptions,
+        //   onRequest(ctx) {
+        //     console.log('My logging', ctx.request)
+        //     return localOptions?.onRequest?.(ctx)
+        //   }
+        // }), localFetch)
       }), {})
     }
   }
@@ -42,7 +46,7 @@ export default defineNuxtPlugin({
 
 Same way you can disable the Nitro plugin and provide your own fetch client:
 
-```ts twoslash
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   openFetch: {
     disableNitroPlugin: true,
@@ -51,7 +55,7 @@ export default defineNuxtConfig({
 })
 ```
 
-```ts
+```ts [server/plugins/openFetch.ts]
 import type { NitroApp } from 'nitropack'
 import { createOpenFetch, useRuntimeConfig } from '#imports'
 
@@ -65,8 +69,8 @@ function defineNitroPlugin(def: NitroAppPlugin): NitroAppPlugin {
 export default defineNitroPlugin(({ localFetch }) => {
   const clients = useRuntimeConfig().public.openFetch
 
-  Object.entries(clients).forEach(([name, client]) => {
-    nitroApp[`$${name}`] = createOpenFetch(client, localFetch)
+  Object.entries(clients).forEach(([name, options]) => {
+    nitroApp[`$${name}`] = createOpenFetch(options, localFetch)
   })
 })
 ```