mirror of
https://github.com/ArthurDanjou/trpc-nuxt.git
synced 2026-02-01 20:57:54 +01:00
docs: Replace regular fetch with a $fetch from nuxt
This feature was implementet in https://github.com/wobsoriano/trpc-nuxt/pull/28 and describe better way to work with ssr
This commit is contained in:
@@ -98,11 +98,31 @@ export default defineNuxtPlugin(() => {
|
|||||||
const client = createTRPCProxyClient<AppRouter>({
|
const client = createTRPCProxyClient<AppRouter>({
|
||||||
links: [
|
links: [
|
||||||
httpBatchLink({
|
httpBatchLink({
|
||||||
|
url: '/api/trpc',
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* If you want to use SSR, you need to use the server's full URL
|
* Replace regular `fetch` with a `$fetch` from nuxt
|
||||||
* @link https://trpc.io/docs/ssr
|
*
|
||||||
**/
|
* During server-side rendering, calling $fetch to fetch your internal API routes
|
||||||
url: 'http://localhost:3000/api/trpc',
|
* 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),
|
||||||
|
})),
|
||||||
|
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user