89 lines
2.7 KiB
TypeScript
89 lines
2.7 KiB
TypeScript
import { httpBatchLink } from '@trpc/client/links/httpBatchLink';
|
||
import { loggerLink } from '@trpc/client/links/loggerLink';
|
||
import { wsLink, createWSClient } from '@trpc/client/links/wsLink';
|
||
import { createTRPCNext } from '@trpc/next';
|
||
import type { inferProcedureOutput } from '@trpc/server';
|
||
import { NextPageContext } from 'next';
|
||
import getConfig from 'next/config';
|
||
import type { AppRouter } from '../server/routers/_app';
|
||
import superjson from 'superjson';
|
||
|
||
// ℹ️ Type-only import:
|
||
// https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export
|
||
|
||
const { publicRuntimeConfig } = getConfig();
|
||
|
||
const { APP_URL, WS_URL } = publicRuntimeConfig;
|
||
|
||
function getEndingLink(ctx: NextPageContext | undefined) {
|
||
if (typeof window === 'undefined') {
|
||
return httpBatchLink({
|
||
url: `${APP_URL}/api/trpc`,
|
||
headers() {
|
||
if (!ctx?.req?.headers) {
|
||
return {};
|
||
}
|
||
// on ssr, forward client's headers to the server
|
||
return {
|
||
...ctx.req.headers,
|
||
'x-ssr': '1',
|
||
};
|
||
},
|
||
});
|
||
}
|
||
const client = createWSClient({
|
||
url: `ws://${window.location.hostname}:${
|
||
process.env.NODE_ENV === 'development' ? '4001' : window.location.port
|
||
}`,
|
||
});
|
||
return wsLink<AppRouter>({
|
||
client,
|
||
});
|
||
}
|
||
|
||
/**
|
||
* A set of strongly-typed React hooks from your `AppRouter` type signature with `createReactQueryHooks`.
|
||
* @link https://trpc.io/docs/react#3-create-trpc-hooks
|
||
*/
|
||
export const trpc = createTRPCNext<AppRouter>({
|
||
config({ ctx }) {
|
||
/**
|
||
* If you want to use SSR, you need to use the server's full URL
|
||
* @link https://trpc.io/docs/ssr
|
||
*/
|
||
|
||
return {
|
||
/**
|
||
* @link https://trpc.io/docs/client/links
|
||
*/
|
||
links: [
|
||
// adds pretty logs to your console in development and logs errors in production
|
||
loggerLink({
|
||
enabled: (opts) =>
|
||
(process.env.NODE_ENV === 'development' &&
|
||
typeof window !== 'undefined') ||
|
||
(opts.direction === 'down' && opts.result instanceof Error),
|
||
}),
|
||
getEndingLink(ctx),
|
||
],
|
||
/**
|
||
* @link https://trpc.io/docs/data-transformers
|
||
*/
|
||
transformer: superjson,
|
||
/**
|
||
* @link https://tanstack.com/query/v4/docs/react/reference/QueryClient
|
||
*/
|
||
queryClientConfig: { defaultOptions: { queries: { staleTime: 60 } } },
|
||
};
|
||
},
|
||
});
|
||
|
||
// export const transformer = superjson;
|
||
/**
|
||
* This is a helper method to infer the output of a query resolver
|
||
* @example type HelloOutput = inferQueryOutput<'hello'>
|
||
*/
|
||
export type inferQueryOutput<
|
||
TRouteKey extends keyof AppRouter['_def']['queries'],
|
||
> = inferProcedureOutput<AppRouter['_def']['queries'][TRouteKey]>;
|