Apollo Client 是一个强大的 GraphQL 客户端，用于在应用程序中进行 GraphQL 查询。它提供了监视查询和活动查询两种不同的方式来处理查询。

1. 监视查询（Watch Query）：监视查询是一种实时更新数据的方式。当查询的结果发生变化时，Apollo Client 会自动更新组件的状态，以反映最新的数据。以下是一个使用 Apollo Client 进行监视查询的代码示例：

import { useQuery, gql } from '@apollo/client';

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
      email
    }
  }
`;

function UserComponent({ userId }) {
  const { loading, error, data } = useQuery(GET_USER, {
    variables: { id: userId },
  });

  if (loading) return 
Loading...
;
  if (error) return 
Error: {error.message}
;

  return (
    

      
User Details
      
Name: {data.user.name}
      
Email: {data.user.email}
    
  );
}

在上面的代码中，我们使用 useQuery 钩子函数来执行监视查询。GET_USER 是一个 GraphQL 查询，它接受一个 id 参数并返回用户的详细信息。当查询的结果发生变化时，组件会自动更新。

2. 活动查询（Active Query）：活动查询是一种手动触发的查询，用于在特定的时间点获取最新的数据。以下是一个使用 Apollo Client 进行活动查询的代码示例：

import { useLazyQuery, gql } from '@apollo/client';

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
      email
    }
  }
`;

function UserComponent({ userId }) {
  const [getUser, { loading, error, data }] = useLazyQuery(GET_USER);

  const fetchUser = () => {
    getUser({ variables: { id: userId } });
  };

  if (loading) return 
Loading...
;
  if (error) return 
Error: {error.message}
;

  return (
    

      Fetch User
      {data && (
        

          
User Details
          
Name: {data.user.name}
          
Email: {data.user.email}
        
      )}
    
  );
}

在上面的代码中，我们使用 useLazyQuery 钩子函数来执行活动查询。GET_USER 是一个 GraphQL 查询，它接受一个 id 参数并返回用户的详细信息。通过调用 getUser 函数，我们可以手动触发查询。在数据返回后，组件会更新并显示最新的用户信息。

总结：

• 监视查询是一种自动更新数据的方式，适用于需要实时获取最新数据的场景。
• 活动查询是一种手动触发的查询，适用于需要在特定时间点获取最新数据的场景。