React Apollo Client，仅在第一次查询时加载更改为 true答案

【问题标题】：React Apollo Client, loading only change to true on first time queryReact Apollo Client，仅在第一次查询时加载更改为 true
【发布时间】：2022-01-16 22:55:25
【问题描述】：

我在同一目录中有一个简单的文件结构 (./src/)

App.js

import React from "react";
import {
  ApolloClient,
  ApolloProvider,
  createHttpLink,
  InMemoryCache,
} from "@apollo/client";
import Gql from "./Gql";

const App = () => {
  const client = new ApolloClient({
    link: createHttpLink({
      uri: "https://api.spacex.land/graphql/",
    }),
    cache: new InMemoryCache(),
  });

  return (
    <ApolloProvider client={client}>
      <Gql />
    </ApolloProvider>
  );
};

export default App;

Gql.js

import React from "react";
import { gql, useLazyQuery } from "@apollo/client";

const Gql = () => {
  const [getQuery, { loading, data, error }] = useLazyQuery(gql`
    query {
      launchesPast(limit: 10) {
        mission_name
        launch_date_local
        launch_site {
          site_name_long
        }
      }
    }
  `);

  if (error) {
    return <div> Error . . .</div>;
  }

  return (
    <React.Fragment>
      <button
        style={{ padding: "20px" }}
        onClick={() => {
          getQuery();
        }}>
        Request Query
      </button>
      <div>Loading: {loading ? "true" : "false"}</div>
      <div>data: {JSON.stringify(data)}</div>
    </React.Fragment>
  );
};

export default Gql;

loading 变量在第一次请求时更改为 true 和 false。但是，如果我尝试一次又一次地查询它而不重新加载页面。当浏览器向 graphql 服务器发出有效的 XHR 请求时，loading 变量保持不变。

【问题讨论】：

在第一次请求之后，从第二次请求开始，页面上的数据似乎也没有更新，对吗？我的意思是<div>data: {JSON.stringify(data)}</div> 仍然显示来自第一个请求的数据？
是的，它将保持不变。我没有更改graphql请求的参数，所以它会返回相同的数据。正如您在 .gif 右侧看到的那样，我调用了 4 次请求。您可以尝试在此链接中查看自己的请求：api.spacex.land/graphql
hm，尝试更改参数并查看它是否更新。这可能是设计使然，因此 useLazyQuery 挂钩没有理由更新数据，因为参数没有改变。
@SangeetAgarwal 它工作，非常感谢。
很高兴我能提供帮助，我是否应该将其添加为答案，以便对可能遇到同样问题的其他人有所帮助？

标签： reactjs graphql request apollo-client

【解决方案1】：

这是设计使然，useLazyQuery 挂钩仅在参数更改时运行，因为这将防止无用的重新渲染。

【讨论】：