不要在trpc上下文中获得cookie

Question

因此，我使用next.js和im设置trpc，在使用trpc.useQuery钩子加载页面之前获取用户，但在trpc上下文中没有使用JWT获取cookie。

我在username.tsx页面中有以下代码：

const UserPage: NextPage = () => {
  const router = useRouter();
  const username = router.query.username as string;

  const user = trpc.useQuery([
    "user.by-username",
    {
      username,
    },
  ]);

  return <Text>{user?.data?.id}</Text>;
};

export default UserPage;

这是trpc上下文中的代码，在这里我不能console.log cookie：

export const createContext = (opts?: trpcNext.CreateNextContextOptions) => {
  const req = opts?.req;
  const res = opts?.res;

  console.log(req?.cookies) // i don't get cookies here

  const user = jwt.verify(req?.cookies.token as string, process.env.JWT_SECRET as string) as User

  return {
    req,
    res,
    prisma,
    user
  };
};

type Context = trpc.inferAsyncReturnType<typeof createContext>;

export const createRouter = () => trpc.router<Context>();

Answer 1

让我复制来自github的答案的后代。

这是SSR的事。默认情况下，头文件不会被复制，因此您必须包含以下代码段：

export default withTRPC<AppRouter>({
  // @typescript-eslint/no-unused-vars
  config({ ctx }) {
    /**
     * If you want to use SSR, you need to
     * use the server's full URL
     * @link https://trpc.io/docs/ssr
     */
    return {
      headers() {
        return {
          cookie: ctx?.req?.headers.cookie,
        };
      },
    }
  }
})

有一个PR开来改进这方面的文档。

Answer 2

我认为您缺少的是从浏览器中转发标头。

这就是你要寻找的魔法：app.tsx#L79

我们有一个有待改进的问题:) https://github.com/trpc/trpc/issues/1811