maddest•10mo ago

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,
  };
}

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>
  );
}

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>({});

import { createTRPCReact } from "@trpc/react-query";

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

export const trpc = createTRPCReact<AppRouter>({});

2 Replies

maddestOP•10mo ago

I wanted to call the same apis in server components, how can i do it? Other than from server actions, Also i am on the app router, Any work around please? Please feel free to tell me if i am doing something wrong in making the context

Mini•10mo ago

just drop req/res in createContext. it doesn't deps on anything