"TRPC config botched with typos and mystery variables"

lang: JavaScript·13 lines

//your_submission

TrpcTrap.js

import { createHydrationHelpers } from "@trpc/react-query/rsc";
import { cache } from "react";
import { createCallerFactory, createTRPCContext } from "./init";
import { makeQueryClient } from "./query-client";
import { appRouter } from "./routers/_app";

export const getQueryClient = cache(makeQueryClient);
export const caller = createCallerFactory(appRouter)(createTRPCContext);

export const { trpc, HydrateClient } = createHydrationHelpers<typeof appRouter>(
  caller1,
  getQuearyClient,
);

//detailed_analysis

Typo Terror

Who needs consistency when you can have 'caller1' and 'caller' living together in harmony? Not to mention 'getQuearyClient' which is a real thing, definitely not a typo.

Mystery Variables

What's 'caller1'? Is it a long lost cousin of 'caller'? The code is so convoluted, it's hard to tell what's going on. Please, for the love of all things good, use meaningful variable names.

Import Insanity

Why import 'cache' from 'react' when you can just use a normal variable? It's not like it's a built-in React hook or anything... oh wait, it is.

//suggested_fix

TrpcTrap_fixed.js

+import { createHydrationHelpers } from "@trpc/react-query/rsc";

+import { cache } from "react";

+import { createCallerFactory, createTRPCContext } from "./init";

+import { makeQueryClient } from "./query-client";

+import { appRouter } from "./routers/_app";

+export const getQueryClient = cache(makeQueryClient);

+export const caller = createCallerFactory(appRouter)(createTRPCContext);

+export const { trpc, HydrateClient } = createHydrationHelpers<typeof appRouter>(

+ caller,

+ getQueryClient,

+);