100 lines
3.4 KiB
TypeScript
100 lines
3.4 KiB
TypeScript
import type { NextPageContext } from "next/types";
|
||
import superjson from "superjson";
|
||
|
||
import { httpLink } from "../client/links/httpLink";
|
||
import { loggerLink } from "../client/links/loggerLink";
|
||
import { splitLink } from "../client/links/splitLink";
|
||
import { createTRPCNext } from "../next";
|
||
// ℹ️ Type-only import:
|
||
// https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export
|
||
import type { TRPCClientErrorLike } from "../react";
|
||
import { httpBatchLink } from "../react";
|
||
import type { inferRouterInputs, inferRouterOutputs, Maybe } from "../server";
|
||
import type { AppRouter } from "../server/routers/_app";
|
||
|
||
/**
|
||
* A set of strongly-typed React hooks from your `AppRouter` type signature with `createTRPCReact`.
|
||
* @link https://trpc.io/docs/v10/react#2-create-trpc-hooks
|
||
*/
|
||
export const trpc = createTRPCNext<AppRouter, NextPageContext, "ExperimentalSuspense">({
|
||
config() {
|
||
const url =
|
||
typeof window !== "undefined"
|
||
? "/api/trpc"
|
||
: process.env.VERCEL_URL
|
||
? `https://${process.env.VERCEL_URL}/api/trpc`
|
||
: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/api/trpc`;
|
||
|
||
/**
|
||
* 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/links
|
||
*/
|
||
links: [
|
||
// adds pretty logs to your console in development and logs errors in production
|
||
loggerLink({
|
||
enabled: (opts) =>
|
||
!!process.env.NEXT_PUBLIC_DEBUG || (opts.direction === "down" && opts.result instanceof Error),
|
||
}),
|
||
splitLink({
|
||
// check for context property `skipBatch`
|
||
condition: (op) => {
|
||
return op.context.skipBatch === true;
|
||
},
|
||
// when condition is true, use normal request
|
||
true: httpLink({ url }),
|
||
// when condition is false, use batching
|
||
false: httpBatchLink({
|
||
url,
|
||
/** @link https://github.com/trpc/trpc/issues/2008 */
|
||
// maxBatchSize: 7
|
||
}),
|
||
}),
|
||
],
|
||
/**
|
||
* @link https://react-query.tanstack.com/reference/QueryClient
|
||
*/
|
||
queryClientConfig: {
|
||
defaultOptions: {
|
||
queries: {
|
||
/**
|
||
* 1s should be enough to just keep identical query waterfalls low
|
||
* @example if one page components uses a query that is also used further down the tree
|
||
*/
|
||
staleTime: 1000,
|
||
/**
|
||
* Retry `useQuery()` calls depending on this function
|
||
*/
|
||
retry(failureCount, _err) {
|
||
const err = _err as never as Maybe<TRPCClientErrorLike<AppRouter>>;
|
||
const code = err?.data?.code;
|
||
if (code === "BAD_REQUEST" || code === "FORBIDDEN" || code === "UNAUTHORIZED") {
|
||
// if input data is wrong or you're not authorized there's no point retrying a query
|
||
return false;
|
||
}
|
||
const MAX_QUERY_RETRIES = 3;
|
||
return failureCount < MAX_QUERY_RETRIES;
|
||
},
|
||
},
|
||
},
|
||
},
|
||
/**
|
||
* @link https://trpc.io/docs/data-transformers
|
||
*/
|
||
transformer: superjson,
|
||
};
|
||
},
|
||
/**
|
||
* @link https://trpc.io/docs/ssr
|
||
*/
|
||
ssr: false,
|
||
});
|
||
|
||
export const transformer = superjson;
|
||
|
||
export type RouterInputs = inferRouterInputs<AppRouter>;
|
||
export type RouterOutputs = inferRouterOutputs<AppRouter>;
|