React apollo在查询graphql时发送POST请求而不是GET

Question

我正在尝试使用react-apollo更熟悉graphql，但是我现在卡住了一段时间。

我只是想从gql服务器按名称查询电影，但到目前为止还没有运气。我的问题是，当我发出请求时，我得到一个错误，说:

POST https://tmdb.sandbox.zoosh.ie/dev/grphql 400

然而，我想做一个GET请求。我尝试在apollo客户端中指定请求方法，但也没有成功。

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import {
ApolloClient,
InMemoryCache,
ApolloProvider,
HttpLink,
} from "@apollo/client";
import "./index.css";
import App from "./App";
const client = new ApolloClient({
cache: new InMemoryCache(),
link: new HttpLink({
uri: "https://tmdb.sandbox.zoosh.ie/dev/grphql",
method: "GET",
}),
connectToDevTools: true,
});
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<ApolloProvider client={client}>
<App />
</ApolloProvider>
</React.StrictMode>
);

MovieList.js

import React from "react";
import { useQuery, gql } from "@apollo/client";
const SEARCH_MOVIES = gql`
query SearchMovies($movieTitle: String!) {
movies(query: $movieTitle) {
id
name
score
genres {
name
}
overview
releaseDate
}
}
`;
const MovieList = () => {
const { loading, error, data } = useQuery(SEARCH_MOVIES, {
variables: {
movieTitle: "fight club",
},
});
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
return (
<>
<div>MovieList</div>
<ol>
{data.movies.map((movie) => (
<li key={movie.id}>{movie.name}</li>
))}
</ol>
</>
);
};
export default MovieList;

如果有人能帮我解决问题，我会很感激的，因为我的眼睛看不见。我在网上找遍了，但没有找到任何关于这个话题的可用资源。

感谢您的提前回复!:)

Answer 1

可以使用useGETForQueries作为构造函数选项。文档

const client = new ApolloClient({
cache: new InMemoryCache(),
link: new HttpLink({
uri: "https://tmdb.sandbox.zoosh.ie/dev/grphql",
useGETForQueries: true
}),
connectToDevTools: true,
});