如何在部署到Heroku的Strapi应用中配置GraphQL并解决GET query missing报错

Strapi 默认在生产环境禁用 GraphQL Playground（可视化调试页面），属于默认安全策略，避免未授权用户直接获取接口 Schema 结构。你直接在浏览器地址栏访问 /graphql 路径时发起的是不带查询参数的 GET 请求，因此会返回 GET query missing 提示，这不代表 GraphQL 接口本身故障，仅代表调试页面被关闭，接口可正常接收 POST 请求调用。

如果需要临时使用可视化调试页面，可以修改 Strapi 的 GraphQL 插件配置：

• 打开项目路径下的/config/plugins.js（文件不存在可手动新建），新增如下配置：

module.exports = {
  graphql: {
    config: {
      endpoint: '/graphql',
      playgroundAlways: true, // 配置生产环境也开启Playground页面
      defaultLimit: 100,
      maxLimit: 200,
    },
  },
};

• 修改完成后重新提交代码部署到 Heroku 即可正常访问 Playground 页面，调试结束后建议将playgroundAlways改为false，避免暴露接口结构带来安全风险。

就算不开启调试页面，GraphQL 接口本身也可以正常响应请求，可通过以下两种方式发起查询：

用接口调试工具发起请求 #

• 打开 Postman、Apifox 等工具，新建 POST 请求，地址填https://your-app-name.herokuapp.com/graphql
• 请求头新增Content-Type: application/json配置
• 请求 Body 选择 JSON 格式，填入你的查询语句即可，示例结构如下：

{
  "query": `query {
    articles {
      data {
        id
        attributes {
          title
          content
        }
      }
    }
  }`
}

• 如果接口需要鉴权，请求头额外添加Authorization: Bearer 你的Strapi API Token即可正常拿到返回数据。

用Apollo Client发起请求 #

前端项目集成 Apollo Client 时，直接将接口地址配置为线上 GraphQL 地址即可正常发起查询，无需额外适配，示例配置如下：

import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';

const httpLink = createHttpLink({
  uri: 'https://your-app-name.herokuapp.com/graphql',
});

// 鉴权逻辑按需添加
const authLink = setContext((_, { headers }) => {
  const token = localStorage.getItem('strapi_token');
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : '',
    }
  }
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});

如果按上述操作仍无法正常获取数据，优先检查两个配置：

• Heroku 环境变量中是否配置了NODE_ENV=production，误设为development可能导致接口配置异常
• Strapi 后台的用户权限设置中，是否给对应接口的 GraphQL 查询权限开放了 Public 访问，或者你请求时携带的 API Token 拥有对应接口的访问权限

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