Next.js本地构建正常 部署到Vercel时出现GraphQL请求参数缺失错误

排查及解决步骤 #

• 第一步：确认Vercel环境变量配置正确
  登录Vercel控制台，进入对应项目的Settings > Environment Variables，确认你已经添加了NEXT_PUBLIC_GRAPHQL_URL变量，且值和本地使用的完全一致，同时勾选了Build、Production、Development三个环境的访问权限。
• 第二步：排除fetch请求优化干扰
  Next.js 13+默认会对fetch请求做静态缓存优化，可能会意外修改POST请求的报文结构，你可以在fetch配置中添加cache: 'no-store'关闭该请求的缓存，同时显式指定Accept请求头：

  const res = await fetch( `${backendUrl}`, {
      method: "POST",
      cache: 'no-store', // 新增配置
      headers: {
          "Content-Type": "application/json",
          "Accept": "application/json", // 新增配置
          ...( authToken ? { "Authorization": `Bearer ${authToken}` } : {} )
      },
      body: JSON.stringify({
          query: query,
          variables: queryVars
      })
  })
  

• 第三步：排查query字符串的压缩问题
  Vercel构建时会运行代码压缩逻辑，部分情况下多行模板字符串可能被错误处理，你可以用String.raw包裹query字符串避免转义或压缩异常：

  const query = String.raw`
      {
          posts( first: 10 ) {
              nodes {
                  slug
                  mainCat
              }
          }   
      }
  `
  

• 第四步：排查WordPress端拦截逻辑
  如果你在WordPress中安装了安全插件（如Wordfence、iThemes Security等），或服务器配置了WAF防火墙，可能会拦截Vercel构建节点的请求，返回的错误报文并非真实的GraphQL响应。你可以尝试将Vercel的构建IP段加入白名单，或临时关闭安全插件验证问题。
• 第五步：添加日志定位问题
  在graphqlRequest函数中打印请求参数和响应内容，部署后在Vercel的构建日志中查看具体的报文内容，就能直接定位到是请求发出去之前query就为空，还是服务端返回异常：

  const body = JSON.stringify({ query: query, variables: queryVars })
  console.log('请求地址：', backendUrl)
  console.log('请求报文：', body)
  const res = await fetch( `${backendUrl}`, {
    // 原有请求配置
  })
  const resText = await res.text() // 先获取原始响应文本
  console.log('响应原始内容：', resText)
  const resData = JSON.parse(resText)
  

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