React Apollo查询GraphQL时发POST而非GET请求报400错误

1. GET请求配置不生效的原因 #

你使用了无效的配置项，@apollo/client的HttpLink不支持通过method: "GET"字段强制查询请求走GET方法，该配置不会被HttpLink识别，因此所有请求依然默认走POST方法。

要让GraphQL查询默认使用GET方法发起，需要使用createHttpLink并配置useGETForQueries: true参数。

2. POST请求返回400的常见原因 #

• 无效的method配置可能干扰了默认请求体、请求头的生成逻辑，导致服务端无法正常解析POST请求携带的GraphQL查询与变量
• 建议先在错误分支打印完整错误信息定位具体问题：将if (error) return <p>Error :(</p>;替换为打印error.networkError、error.graphQLErrors的逻辑，可直接看到是参数错误、字段不存在还是网络层解析失败。

具体修复步骤 #

修改index.js中的Apollo Client配置 #

替换原有HttpLink相关的导入与配置，代码如下：

import React from "react";
import ReactDOM from "react-dom/client";
import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  createHttpLink, // 替换原HttpLink导入
} from "@apollo/client";

import "./index.css";
import App from "./App";

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: createHttpLink({
    uri: "https://tmdb.sandbox.zoosh.ie/dev/grphql",
    useGETForQueries: true, // 全局开启查询请求走GET的正确配置
  }),
  connectToDevTools: true,
});

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>
);

验证配置效果 #

修改完成后刷新页面，打开浏览器开发者工具-网络面板，即可看到对应GraphQL请求变为GET方法，查询语句与变量会被自动编码到URL参数中，不会再以POST方法发起请求。

如果修改后依然返回错误，打印完整错误信息排查：

• 若为GraphQL语法错误：检查查询语句中的字段名、参数名是否和服务端Schema一致，比如注意字段是驼峰命名还是下划线命名
• 若为网络层错误：检查接口地址是否可正常访问，是否存在跨域限制

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