Fhd
Fhd5mo 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
Fhd
Fhd5mo 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
Mini5mo ago
just drop req/res in createContext. it doesn't deps on anything