fahadF
tRPC•2y ago•
2 replies
fahad

Unable to use caller, in frontend bcz i dont have access to req and res objects

i was trying to use trpc callers, for ssr the queries, but i was not able to create one since i have req and res objects in my context, where my context looks like
interface CreateInnerContextOptions
  extends Partial<trpcNext.CreateNextContextOptions> {
  session: Session | null;
}

export async function createContextInner(opts: CreateInnerContextOptions) {
  return {
    // db,
    session: opts.session,
  };
}

// for RSC(app router) we need to send only authOptions for getting server session
export async function createContext({
  req,
  res,
}: trpcNext.CreateNextContextOptions) {
  const session = await getServerSession(authOptions);
  // const session = null;
  const contextInner = await createContextInner({ session });
  return {
    ...contextInner,
    req,
    res,
  };
}

it asks me to give it req and res objects which i cannot do, to use it, is there some way through which i can use the same trpc endpoints, so that i can also use them in server components?

This is my trpr Provider Wrapper
export default function TrpcProvider({ children }: PropsWithChildren) {
  const [queryClient] = useState(() => new QueryClient({}));
  const [trpcClient] = useState(() =>
    trpc.createClient({
      transformer: SuperJSON,
      links: [
        httpBatchLink({
          url: getUrl(),
        }),
      ],
    }),
  );
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </trpc.Provider>
  );
}


this is my trpc client, which i am using in client components,
import { createTRPCReact } from "@trpc/react-query";

import { type AppRouter } from "../server/routers/_app";

export const trpc = createTRPCReact<AppRouter>({});
Was this page helpful?