Apollo graphQL 中的 useQuery 和 useLazyQuery 有什么区别？答案

【问题标题】：What is the difference between useQuery and useLazyQuery in Apollo graphQL?Apollo graphQL 中的 useQuery 和 useLazyQuery 有什么区别？
【发布时间】：2020-12-20 05:07:03
【问题描述】：

我正在浏览 Apollo React hooks 的文档。

看到有两个查询钩子可以使用useQuery 和useLazyQuery

我正在阅读此页面。 https://www.apollographql.com/docs/react/api/react/hooks/

谁能解释一下它们之间有什么区别以及在什么情况下应该使用它。

【问题讨论】：

标签： reactjs graphql apollo

【解决方案1】：

当useQuery被组件调用时，后续会触发查询。

但是当useLazyQuery被调用时，并没有触发后续的查询，而是返回一个可以用来手动触发查询的函数。在此页面上进行了说明： https://www.apollographql.com/docs/react/data/queries/#executing-queries-manually

当 React 挂载并渲染一个调用 useQuery 的组件时 hook，Apollo Client 会自动执行指定的查询。但是，如果您想执行查询以响应不同的事件，例如用户单击按钮，该怎么办？ useLazyQuery 钩子非常适合执行查询以响应组件渲染以外的事件。这个钩子的作用就像useQuery，除了一个关键的例外：当useLazyQuery被调用时，它不会立即执行它的关联询问。相反，它会在结果元组中返回一个函数，您可以在准备好执行查询时调用该函数。

【讨论】：

我正在使用“useLazyQuery”，并且我正在从一个带有请求的状态发送变量，并且每次我更改输入的状态时，每次安装组件时都会执行请求，尽管我在 onClick 上使用它事件。
@Sharif 应该有关于你如何使用它的错误（例如无意中执行查询功能），否则你可能会报告问题github.com/apollographql/apollo-client/issues，因为根据他们的文档，情况并非如此
您可以创建一个新问题并在此处提供以便我看一下吗？像codeandbox这样的最小可重现环境也很受欢迎。

【解决方案2】：

假设您有一个调用 useQuery 的组件，那么一旦组件挂载，useQuery 就会运行并从服务器获取数据。但是，如果您在该组件中使用 useLazyQuery 而不是 useQuery，则查询不会运行，并且在组件安装时不会获取数据。相反，您可以根据您的要求运行查询，例如在单击按钮后。示例：

import React, { useState } from 'react';
import { useLazyQuery } from '@apollo/client';

function DelayedQuery() {
  const [dog, setDog] = useState(null);
  const [getDog, { loading, data }] = useLazyQuery(GET_DOG_PHOTO);

  if (loading) return <p>Loading ...</p>;

  if (data && data.dog) {
    setDog(data.dog);
  }

  return (
    <div>
      {dog && <img src={dog.displayImage} />}
      <button onClick={() => getDog({ variables: { breed: 'bulldog' } })}>
        Click me!
      </button>
    </div>
  );
}

在这里，只要您单击按钮，就只会运行查询并获取数据并显示图像。但是，如果您改用 useQuery，则在单击按钮之前（即当组件挂载时），数据将被获取并显示图像

【讨论】：

【解决方案3】：

更新：

https://github.com/apollographql/apollo-client/blob/main/CHANGELOG.md#improvements-due-to-brainkim-in-8875

useLazyQuery 现在返回 Apollo Client 3.5.0 (2021-11-08) 的承诺

【讨论】：