From a5cb0c754ec6a0e0877424c12269cf9e0f13773d Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Sun, 18 Dec 2022 22:22:15 -0800 Subject: [PATCH] move links to another file --- playground/plugins/trpc-client.ts | 10 ++--- src/client/index.ts | 68 +++---------------------------- src/client/links.ts | 65 +++++++++++++++++++++++++++++ 3 files changed, 76 insertions(+), 67 deletions(-) create mode 100644 src/client/links.ts diff --git a/playground/plugins/trpc-client.ts b/playground/plugins/trpc-client.ts index aac5a28..3421cc6 100644 --- a/playground/plugins/trpc-client.ts +++ b/playground/plugins/trpc-client.ts @@ -8,11 +8,11 @@ export default defineNuxtPlugin(() => { transformer: superjson, links: [ // adds pretty logs to your console in development and logs errors in production - // loggerLink({ - // enabled: opts => - // process.env.NODE_ENV === 'development' || - // (opts.direction === 'down' && opts.result instanceof Error) - // }), + loggerLink({ + enabled: opts => + process.env.NODE_ENV === 'development' || + (opts.direction === 'down' && opts.result instanceof Error) + }), httpBatchLink() ] }) diff --git a/src/client/index.ts b/src/client/index.ts index 2bd143c..96fbbdd 100644 --- a/src/client/index.ts +++ b/src/client/index.ts @@ -1,12 +1,10 @@ -import { type CreateTRPCClientOptions, type inferRouterProxyClient, createTRPCProxyClient, httpLink as _httpLink, httpBatchLink as _httpBatchLink, HttpBatchLinkOptions } from '@trpc/client' +import { type CreateTRPCClientOptions, type inferRouterProxyClient, createTRPCProxyClient } from '@trpc/client' import { type AnyRouter } from '@trpc/server' import { createFlatProxy, createRecursiveProxy } from '@trpc/server/shared' import { hash } from 'ohash' -import { FetchError } from 'ofetch' import { type DecoratedProcedureRecord } from './types' // @ts-expect-error: Nuxt auto-imports -import { getCurrentInstance, onScopeDispose, useAsyncData, useRequestHeaders } from '#imports' -import { HTTPLinkOptions } from '@trpc/client/dist/links/internals/httpUtils' +import { getCurrentInstance, onScopeDispose, useAsyncData } from '#imports' /** * Calculates the key used for `useAsyncData` call @@ -67,61 +65,7 @@ export function createTRPCNuxtClient (opts: CreateTRP return decoratedClient } -function customFetch(input: RequestInfo | URL, init?: RequestInit | undefined) { - return globalThis.$fetch.raw(input.toString(), init) - .catch((e) => { - if (e instanceof FetchError && e.response) { return e.response } - throw e - }) - .then(response => ({ - ...response, - json: () => Promise.resolve(response._data) - })) -} - -/** - * This is a convenience wrapper around the original httpLink - * that replaces 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 - */ -export function httpLink(opts?: HTTPLinkOptions) { - const headers = useRequestHeaders() - - return _httpLink({ - url: '/api/trpc', - headers () { - return headers - }, - fetch: customFetch, - ...opts, - }) -} - - -/** - * This is a convenience wrapper around the original httpBatchLink - * that replaces 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 - */ -export function httpBatchLink(opts?: HttpBatchLinkOptions) { - const headers = useRequestHeaders() - - return _httpBatchLink({ - url: '/api/trpc', - headers () { - return headers - }, - fetch: customFetch, - ...opts, - }) -} +export { + httpBatchLink, + httpLink +} from './links' diff --git a/src/client/links.ts b/src/client/links.ts new file mode 100644 index 0000000..0d4fa9b --- /dev/null +++ b/src/client/links.ts @@ -0,0 +1,65 @@ +import { httpLink as _httpLink, httpBatchLink as _httpBatchLink, HttpBatchLinkOptions } from '@trpc/client' +import { type AnyRouter } from '@trpc/server' +import { FetchError } from 'ofetch' +// @ts-expect-error: Nuxt auto-imports +import { useRequestHeaders } from '#imports' +import { type HTTPLinkOptions } from '@trpc/client/dist/links/internals/httpUtils' + +function customFetch(input: RequestInfo | URL, init?: RequestInit | undefined) { + return globalThis.$fetch.raw(input.toString(), init) + .catch((e) => { + if (e instanceof FetchError && e.response) { return e.response } + throw e + }) + .then(response => ({ + ...response, + json: () => Promise.resolve(response._data) + })) +} + +/** + * This is a convenience wrapper around the original httpLink + * that replaces 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 + */ +export function httpLink(opts?: HTTPLinkOptions) { + const headers = useRequestHeaders() + + return _httpLink({ + url: '/api/trpc', + headers () { + return headers + }, + fetch: customFetch, + ...opts, + }) +} + + +/** + * This is a convenience wrapper around the original httpBatchLink + * that replaces 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 + */ +export function httpBatchLink(opts?: HttpBatchLinkOptions) { + const headers = useRequestHeaders() + + return _httpBatchLink({ + url: '/api/trpc', + headers () { + return headers + }, + fetch: customFetch, + ...opts, + }) +}