typescript 不在trpc上下文中获取Cookie

wyyhbhjk  于 2022-12-27  发布在  TypeScript
关注(0)|答案(2)|浏览(131)

因此,我使用next.js设置了trpc,并尝试使用trpc.useQuery钩子在页面加载之前使用ssr获取用户,但在trpc上下文中没有使用JWT标记获取cookie
我有这个代码在[用户名].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 cookies:

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>();
jmp7cifd

jmp7cifd1#

让我从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 open可以改进这方面的文档。

but5z9lq

but5z9lq2#

我想你缺少的是从浏览器转发标题。
这就是你要找的魔力https://github.com/trpc/examples-next-prisma-starter-websockets/blob/daf54ca6576f3e290aa4f36dc7d0ff1eb718b716/src/pages/_app.tsx#L79
我们有一个未决问题需要改进:)https://github.com/trpc/trpc/issues/1811

相关问题