How React Query or Apollo Client ensures updated data?

React Query 和 Apollo Client 的数据更新方式

React Query 的数据更新机制

React Query 主要用于处理异步数据的获取、缓存和更新。它确保数据更新的核心机制主几点：

1. 后台更新与缓存无效化: React Query 通过后台自动重新获取数据来更新缓存中的数据。这意味着即使用户没有直接与应用交互，数据也会保持最新。例如，可以设置一个查询的 refetchInterval，让数据每隔一定时间自动更新。

2. 窗口聚焦时的数据更新: 当用户切换回一个已经加载的应用窗口时，React Query 可以配置为自动重新获取数据，确保用户查看的信息总是最新的。这在 useQuery 钩子中通过设置 refetchOnWindowFocus 为 true 来实现。

3. 数据依赖更新: 在有些情况下，一个数据项的更新可能依赖于另一个数据项的变化。React Query 通过 queryKey 依赖来处理这种情况，当一个数据项更新后，所有依赖这个数据项的查询将会被重新获取。

Apollo Client 的数据更新机制

Apollo Client 主要用于处理 GraphQL 数据的管理。它通过几种方法确保数据的更新：

1. 轮询: 与 React Query 类似，Apollo Client 也可以配置轮询机制，定期执行 GraphQL 查询来获取最新数据。例如，在 Apollo 中可以为查询设置 pollInterval，指定更新频率。

2. 缓存正常化: Apollo Client 使用缓存正常化策略来避免在多个地方存储相同的数据。当一个查询或变更导致某个数据实体更改时，所有引用该数据实体的查询的缓存都会自动更新。

3. 订阅 (Subscriptions): GraphQL 订阅允许客户端在数据更改时接收实时更新。Apollo Client 可以通过 WebSocket 实现订阅，当后端数据变更时，相关的前端视图将实时更新。

示例

React Query 示例: 假设有一个用户信息显示组件，需要定时更新用户数据：

javascript
import { useQuery } from 'react-query';

function UserInfo() {
  const { data, isLoading, error } = useQuery('user', fetchUserData, {
    refetchInterval: 60000, // 每分钟更新一次用户数据
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error fetching user data</div>;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>Email: {data.email}</p>
    </div>
  );
}

Apollo Client 示例: 使用 Apollo Client 在客户端实现 GraphQL 订阅：

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

const SUBSCRIBE_TO_USER_UPDATES = gql`
  subscription OnUserUpdated($userId: ID!) {
    userUpdated(userId: $userId) {
      id
      name
      email
    }
  }
`;

function UserUpdates({ userId }) {
  const { data, loading, error } = useSubscription(SUBSCRIBE_TO_USER_UPDATES, {
    variables: { userId },
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>{data.userUpdated.name}</h1>
      <p>Email: {data.userUpdated.email}</p>
    </div>
  );
}

通过这些机制和示例可以看出，React Query 和 Apollo Client 都提供了强大的工具来确保应用中显示的数据总是最新的，同时也降低了手动管理这些数据更新所需的复杂性。