Apollo graphQL 中 useQuery 和 useLazyQuery 有什么区别

JS

在Apollo GraphQL中，useQuery和useLazyQuery是两种不同的钩子函数，用于在React组件中执行GraphQL查询。尽管它们都可以用于发起查询请求，但它们在功能和使用方式上有一些区别。

首先，让我们来了解一下useQuery。useQuery是一种在组件渲染时立即执行GraphQL查询的钩子函数。它会自动触发查询请求，并返回一个包含查询结果的对象。这意味着在组件挂载后，查询会立即发送，并且你可以直接从返回的数据对象中获取到查询结果。

与useQuery不同，useLazyQuery是一种在需要时才执行GraphQL查询的钩子函数。它不会自动触发查询请求，而是返回一个带有执行查询函数的元组。你可以在需要的时候调用该函数来触发查询请求，并且可以多次调用它。这样，你就可以根据需要来控制查询的执行时机。

使用useQuery的案例代码如下：

JSx
import React from 'react';
import { useQuery, gql } from '@apollo/client';
const GET_USERS = gql<code>
  query GetUsers {
    users {
      id
      name
    }
  }
</code>;
const UsersList = () => {
  const { loading, error, data } = useQuery(GET_USERS);
  if (loading) return 
Loading...
;
  if (error) return 
<img src="https://img.izhida.com/topic/0a40e3c91a3a55c9a37428c6d194d0e5.jpg" alt="AI"><br>AI
Error: {error.message}
;
  return (
    <ul>
      {data.users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};
export default UsersList;

在这个例子中，useQuery钩子函数被用于执行名为GET_USERS的GraphQL查询。在组件挂载后，查询会立即发送，并且根据查询结果展示用户列表。如果数据正在加载中，会显示"Loading..."，如果发生错误，会显示错误信息。

现在，让我们看一下useLazyQuery的案例代码：

JSx
import React from 'react';
import { useLazyQuery, gql } from '@apollo/client';
const GET_USER = gql<code>
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
    }
  }
</code>;
const UserDetAIl = ({ userId }) => {
  const [getUser, { loading, error, data }] = useLazyQuery(GET_USER);
  if (loading) return 
Loading...
;
  if (error) return 
Error: {error.message}
;
  if (data) {
    return (
      <div>
        
User ID: {data.user.id}
        
User Name: {data.user.name}
      </div>
    );
  }
  return (
    <div>
      
No user selected.
      <button onClick={() => getUser({ variables: { id: userId } })}>
        Get User
      </button>
    </div>
  );
};
export default UserDetAIl;

在这个例子中，useLazyQuery被用于执行名为GET_USER的GraphQL查询。在组件渲染时，不会自动触发查询请求。相反，会返回一个执行查询的函数getUser，以及一个包含查询状态的对象。当点击"Get User"按钮时，会调用getUser函数来触发查询请求，并且传递查询参数。一旦查询完成，查询结果会存储在data对象中，并根据结果展示用户详情。

使用useQuery和useLazyQuery的不同场景

在实际应用中，使用useQuery和useLazyQuery的场景略有不同。useQuery适用于那些在组件挂载后需要立即获取数据并展示的情况。而useLazyQuery则适用于那些需要根据用户操作或特定事件触发查询的情况。

通过使用Apollo GraphQL中的useQuery和useLazyQuery钩子函数，我们可以在React组件中方便地执行GraphQL查询。useQuery适用于立即获取数据并展示的场景，而useLazyQuery适用于根据用户操作或事件触发查询的场景。选择合适的钩子函数可以让我们更好地控制查询的执行时机，提高应用程序的性能和用户体验。