Next.js API路由集成Supabase：为何Cookie在req.req.cookies中？

为什么Cookie在req.req.cookies而非req.cookies？ #

这是因为你使用的Yoga GraphQL在处理Next.js API路由时，会对原生的NextApiRequest进行包装。你当前拿到的req其实是Yoga自定义的请求对象，而原生的Next.js请求实例被嵌套在了req.req中，所以Cookie这类原生请求的属性只能从req.req里获取。

如何解决服务端Supabase客户端的问题？ #

是的，你需要将**原生的Next请求对象（req.req）和响应对象（res.res）**传入createServerSupabaseClient，因为这个方法期望接收标准的NextApiRequest和NextApiResponse实例，而非Yoga包装后的对象。

修改后的代码示例 #

const createContext = async (req: any, res: any) => {
  // 获取原生的Next请求与响应对象
  const nextReq = req.req;
  const nextRes = res.res;

  console.log('Req Cookies:', nextReq.cookies); // 现在能正确获取Cookie
  console.log('Cookies:', req.cookies); // Yoga自定义req的cookies为空是正常的

  const supabase = createServerSupabaseClient<Database>({ req: nextReq, res: nextRes });
  const { data: { user } } = await supabase.auth.getUser();

  return { supabase, user };
};

export default createYoga({
  schema,
  graphqlEndpoint: '/api/graphql',
  context: createContext,
});

类型修正建议 #

如果你需要严格的类型支持，可以通过Yoga提供的类型来标注context参数：

import type { YogaInitialContext } from 'graphql-yoga';
import type { NextApiRequest, NextApiResponse } from 'next';

const createContext = async ({ req, res }: YogaInitialContext) => {
  const nextReq = req.req as NextApiRequest;
  const nextRes = res.res as NextApiResponse;
  
  const supabase = createServerSupabaseClient<Database>({ req: nextReq, res: nextRes });
  const { data: { user } } = await supabase.auth.getUser();

  return { supabase, user };
};

这样修改后，createServerSupabaseClient就能正确读取到supabase-auth-token Cookie，服务端认证逻辑就能正常工作了。

内容的提问来源于stack exchange，提问作者Coherent