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

Question

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

并看到有两个查询钩子用于它们是useQuery和useLazyQuery

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

有人可以解释一下它们之间有什么区别，在这种情况下应该使用它。

Answer 1

当组件调用 useQuery 时，它会随后触发查询。但是当 useLazyQuery 被调用时，它不会并返回一个可用于手动触发查询的函数。本页对此进行了说明。

https://www.apollographql.com/docs/react/data/queries/#executing-queries-manually

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

Answer 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 代替，则在单击按钮之前（即组件安装时），数据将被获取并显示图像

Answer 3

更新：

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

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