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

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

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

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

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

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