Next.js使用graphql-request请求GraphCMS报仅支持绝对URL错误

• 核心原因是传入GraphQLClient的请求地址参数非法，不是符合规范的绝对URL
• 常见触发场景：
  1. 环境变量process.env.ENDPOINT未正确加载，返回undefined
  2. 配置的ENDPOINT值缺少http/https前缀，为相对路径
  3. 环境变量文件存放位置错误、变量名拼写错误，或修改.env文件后未重启Next.js开发服务

1. 先验证环境变量加载状态
   在getServerSideProps中新增打印逻辑，重启服务后查看终端输出，确认ENDPOINT值存在且格式正确：

export const getServerSideProps = async (pageContext) => {
  console.log('加载的ENDPOINT值：', process.env.ENDPOINT)
  // 原有逻辑
}

2. 修正环境变量配置

• 确认环境变量文件放在项目根目录，开发环境使用.env.local命名，不要放在pages等子目录下
• 确认ENDPOINT为带https前缀的完整绝对路径，示例配置：

# .env.local 内容示例
ENDPOINT=https://你的GraphCMS服务地址/graphql
GRAPH_CMS_TOKEN=你的GraphCMS授权令牌

• 所有.env文件修改后，必须重启next dev命令才能生效

3. 新增容错校验逻辑
   避免异常场景下抛出模糊报错，提前拦截非法配置：

export const getServerSideProps = async (pageContext) => {
  const url = process.env.ENDPOINT
  if (!url || !url.startsWith('http')) {
    throw new Error('GRAPHQL接口地址配置错误，请检查环境变量ENDPOINT')
  }
  const graphQLClient = new GraphQLClient(url, {
      headers: {
          "Authorization" : process.env.GRAPH_CMS_TOKEN
      }
  })
  // 剩余原有逻辑...
}

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