在graphql-request中使用getServerSideProps时如何传递请求头

在使用Next.js的getServerSideProps进行服务端渲染时，我们经常需要从客户端请求头中获取特定信息，并将其传递给GraphQL查询。graphql-request库提供了多种灵活的方式来处理这种情况。

基本场景分析

在服务端渲染场景下，我们通常需要：

1. 从传入的请求对象中获取特定的请求头信息
2. 将这些信息传递给后续的GraphQL查询
3. 可能需要将这些信息添加到响应头中

解决方案对比

方法一：直接传递headers对象

最直观的方式是将headers作为第二个参数传递给request方法：

const data = await graphQLClient.request(query, variables, headers);

这种方式的优点是简单直接，但缺点是：

• 需要额外处理headers对象
• 在使用了react-query等库时可能需要禁用某些eslint规则

方法二：使用setHeader方法

graphql-request库提供了更优雅的解决方案 - 使用Client实例的setHeader方法：

graphQLClient.setHeader('new_header', accessToken);
const data = await graphQLClient.request(query, { postId });

这种方式的优势在于：

1. 代码更清晰，职责更明确
2. 不需要修改request方法的调用方式
3. 设置的header会应用于该Client实例的所有后续请求

实际应用建议

在实际项目中，建议采用以下最佳实践：

1. 初始化时设置通用headers：在创建GraphQLClient实例时就设置那些不会变化的headers

2. 动态headers处理：对于需要动态设置的headers，使用setHeader方法

3. 请求隔离：如果需要为不同请求设置不同的headers，考虑创建多个Client实例

4. 安全考虑：特别注意敏感信息（如认证token）的处理，避免泄露

完整示例代码

export const getServerSideProps = (async context => {
  // 从查询参数中获取postId
  const { id: postId } = context.query;
  
  // 从请求头中获取access token
  const headers = context.req.headers;
  const accessToken = headers['app_header'];

  // 设置GraphQL请求头
  graphQLClient.setHeader('Authorization', `Bearer ${accessToken}`);
  
  // 执行GraphQL查询
  const data = await graphQLClient.request(query, { postId });

  return {
    props: {
      data
    }
  };
}) satisfies GetServerSideProps;

通过这种方式，我们可以灵活地处理服务端渲染场景下的headers传递问题，同时保持代码的清晰和可维护性。