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

Question

我正在浏览 Apollo React 挂钩的文档。

并且看到有两个查询挂钩用于 useQuery 和 useLazyQuery

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

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

Answer 1

当useQuery被组件调用时，它随后触发查询。

但是当useLazyQuery被调用时，它不会触发后续的查询，而是return一个可以用来手动触发查询的函数。在此页面上进行了解释： https://www.apollographql.com/docs/react/data/queries/#manual-execution-with-uselazyquery

When React mounts and renders a component that calls the useQuery hook, Apollo Client automatically executes the specified query. But what if you want to execute a query in response to a different event, such as a user clicking a button? The useLazyQuery hook is perfect for executing queries in response to events other than component rendering. This hook acts just like useQuery, with one key exception: when useLazyQuery is called, it does not immediately execute its associated query. Instead, it returns a function in its result tuple that you can call whenever you're ready to execute the query.

Answer 2

假设您有一个调用 useQuery 的组件，然后一旦安装该组件，就使用 useQuery 运行s 并从服务器获取数据。但是，如果您在该组件中使用 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>
  );
}

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

Answer 3

更新：

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

现在使用 LazyQuery returns Apollo Client 3.5.0 (2021-11-08) 的承诺

Answer 4

我刚刚意识到的似乎没有被提及的事情是 useLazyQuery 没有从缓存中读取。这有点类似于调用从 useQuery.

返回的 refetch 函数

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

What is the difference between useQuery and useLazyQuery in Apollo graphQL?

apollo

reactjs

graphql