arthur/trpc-nuxt
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/trpc-nuxt.git synced 2026-01-23 16:30:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: improve docs

Browse Source
This commit is contained in:
wobsoriano
2022-12-18 23:25:46 -08:00
parent 09e0a6c479
commit f01b8d5d8d
10 changed files with 211 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
docs/content/1.get-started/2.usage/1.simple.md
View File

@@ -1,5 +1,5 @@
---
title: Simple Usage
title: Simple
description: tRPC-Nuxt provides first class integration with tRPC.
---
@@ -77,10 +77,8 @@ export default createNuxtApiHandler({
Create a strongly-typed plugin using your API's type signature.
```ts [plugins/client.ts]
import { httpBatchLink } from '@trpc/client'
import { createTRPCNuxtClient } from 'trpc-nuxt/client'
import { createTRPCNuxtClient, httpBatchLink } from 'trpc-nuxt/client'
import type { AppRouter } from '~/server/trpc/routers'
import { FetchError } from 'ofetch'
export default defineNuxtPlugin(() => {
/**
@@ -91,30 +89,6 @@ export default defineNuxtPlugin(() => {
links: [
httpBatchLink({
url: '/api/trpc',
/**
* Replace regular `fetch` with a `$fetch` from nuxt
*
* During server-side rendering, calling $fetch to fetch your internal API routes
* will directly call the relevant function (emulating the request),
* saving an additional API call.
*
* @see https://nuxt.com/docs/api/utils/dollarfetch
*/
fetch: (input, options) =>
globalThis.$fetch.raw(input.toString(), options)
.catch((e) => {
if (e instanceof FetchError && e.response)
return e.response
throw e
})
.then(response => ({
...response,
json: () => Promise.resolve(response._data),
})),
}),
],
})

30
docs/content/1.get-started/2.usage/2.recommended.md
View File

@@ -1,5 +1,5 @@
---
title: Recommended Usage
title: Recommended
description: tRPC-Nuxt provides first class integration with tRPC.
---
@@ -112,10 +112,8 @@ If you need to split your router into several subrouters, you can implement them
Create a strongly-typed plugin using your API's type signature.
```ts [plugins/client.ts]
import { httpBatchLink } from '@trpc/client'
import { createTRPCNuxtClient } from 'trpc-nuxt/client'
import { createTRPCNuxtClient, httpBatchLink } from 'trpc-nuxt/client'
import type { AppRouter } from '~/server/trpc/routers'
import { FetchError } from 'ofetch'
export default defineNuxtPlugin(() => {
/**
@@ -126,30 +124,6 @@ export default defineNuxtPlugin(() => {
links: [
httpBatchLink({
url: '/api/trpc',
/**
* Replace regular `fetch` with a `$fetch` from nuxt
*
* During server-side rendering, calling $fetch to fetch your internal API routes
* will directly call the relevant function (emulating the request),
* saving an additional API call.
*
* @see https://nuxt.com/docs/api/utils/dollarfetch
*/
fetch: (input, options) =>
globalThis.$fetch.raw(input.toString(), options)
.catch((e) => {
if (e instanceof FetchError && e.response)
return e.response
throw e
})
.then(response => ({
...response,
json: () => Promise.resolve(response._data),
})),
}),
],
})