Question

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

并且看到有两个查询挂钩供使用，分别是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，则在单击按钮之前（即在安装组件时），将已获取数据并已显示图像

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

2 个答案: