React apollo 在查詢 graphql 時發送 POST 請求而不是 GET

Question

我正在嘗試使用 react-apollo 更熟悉 graphql，但現在我被困了一段時間。

我只想從 gql 服務器按名稱查詢電影，但到目前為止還沒有運氣。 我的問題是，當我提出請求時，我收到一條錯誤消息：

發布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>
);

電影列表.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,
});