在graphql-request中使用getServerSideProps时传递请求头的最佳实践

在使用Next.js的getServerSideProps进行服务端渲染时，我们经常需要从服务器端获取GraphQL数据。graphql-request是一个轻量级的GraphQL客户端，它提供了简单的方式来发送GraphQL查询。本文将详细介绍如何在getServerSideProps中正确配置请求头。

问题背景

在Next.js应用中，当我们需要在服务端渲染页面时获取数据，通常会使用getServerSideProps函数。这个函数在每次页面请求时都会运行在服务器端。有时我们需要在GraphQL请求中传递特定的请求头，比如认证令牌或其他自定义头信息。

传统解决方案

最直接的方式是在每次调用graphQLClient.request时传递headers参数：

const data = await graphQLClient.request(query, variables, {
  headers: {
    'Custom-Header': 'value'
  }
});

这种方式虽然可行，但存在几个问题：

1. 代码重复 - 每次请求都需要重复设置相同的头信息
2. 可维护性差 - 如果需要修改头信息，需要在多处修改
3. 与eslint规则冲突 - 如果使用了react-query等库，可能会违反深度依赖规则

更优雅的解决方案

graphql-request客户端提供了setHeader方法，可以全局设置请求头：

export const getServerSideProps = async (context) => {
  const { id: postId } = context.query;
  
  // 从请求上下文中获取原始头信息
  const headers = context.req.headers;
  const accessToken = headers['app_header'];

  // 全局设置请求头
  graphQLClient.setHeader('new_header', accessToken);

  // 执行GraphQL查询
  const data = await graphQLClient.request(query, { postId });

  return { props: { data } };
};

方法优势

1. 一次性设置：只需在客户端初始化后设置一次，所有后续请求都会自动包含这些头信息
2. 代码简洁：避免了在每个请求中重复设置头信息
3. 易于维护：头信息集中管理，修改时只需改动一处
4. 兼容性好：不会与eslint规则产生冲突

实现原理

graphql-request的setHeader方法会将头信息存储在客户端的配置中。当执行request方法时，这些预定义的头信息会自动包含在HTTP请求中。这种方式类似于其他HTTP客户端（如axios）的拦截器机制。

注意事项

1. 如果头信息需要根据每个请求动态变化，仍然需要在request方法中单独设置
2. 在多用户环境下，要注意避免头信息的交叉污染
3. 敏感信息（如认证令牌）应该妥善处理，避免安全问题

通过这种方式，我们可以在Next.js的getServerSideProps中高效、安全地使用graphql-request进行数据获取，同时保持代码的整洁和可维护性。