T
tRPC

❓-help

tRPC context and NextJS

Mmoron.penguin1/15/2023
Guys quick question about using trpc and nextjs. I'm using context with trpc to create some queries that will be only accessible by logged in users. On nextjs side I'm using react context to manage it for now. So my thinking was to pass one of the ctx variable that will be user ID to trpc server when I use useQuery. Ex) trpc.user.getSecret.useQuery(undefined, {req.body}). But I'm honestly stuck on how I can send next request body. Code for trpc context is this.
export const createContext = async (opts: CreateNextContextOptions) => {
  // console.log(opts.req, "inside trpc context");
  async function getUser() {
    console.log(opts.req.body, "res body");
    const user = await prisma.user.findUnique({
      where: { id: opts.req.body.id ? opts.req.body.id : "" },
    });

    return user ? user : null;
  }
  const user = await getUser();

  return await createContextInner({ user });
};
export const createContext = async (opts: CreateNextContextOptions) => {
  // console.log(opts.req, "inside trpc context");
  async function getUser() {
    console.log(opts.req.body, "res body");
    const user = await prisma.user.findUnique({
      where: { id: opts.req.body.id ? opts.req.body.id : "" },
    });

    return user ? user : null;
  }
  const user = await getUser();

  return await createContextInner({ user });
};
I know you can change body in api/[trpc] route but I won't have access to ReactContext there so if any of you guys have a suggestion or solution please let me know. 🙏🙏🙏
MSmark salsbery1/15/2023
Instead of modifying the body, you could pass the id in an http header.. https://trpc.io/docs/header
Custom header | tRPC
The headers option can be customized in the config when using the httpBatchLink or the httpLink.
Mmoron.penguin1/15/2023
Thank you for the information. I read that too and honestly idk why I didn't try that.
MSmark salsbery1/15/2023
If you go that route, you may find a happier future self 😉

Looking for more? Join the community!