绕过缓存 - 使用 apollo useQuery

当我们在使用 Apollo 客户端进行数据查询时，通常会将查询结果缓存在 Apollo 缓存中以提高性能。然而，在某些情况下，我们可能需要绕过缓存，并强制从服务器获取最新的数据。在这种情况下，我们可以使用 useQuery 钩子的 fetchPolicy 参数。

fetchPolicy 参数

fetchPolicy 参数控制了钩子是否应该尝试从缓存中获取数据，或者是否强制向服务器发出请求。它可以取以下值：

• cache-first (默认值)：将首先尝试从缓存中获取数据。如果缓存中没有数据，则向服务器发出请求。
• cache-and-network：将首先尝试从缓存中获取数据，并在此基础上向服务器发出请求以更新缓存。同时，钩子将会同时返回缓存和网络数据。
• network-only：强制钩子始终从服务器获取数据，并忽略缓存。
• cache-only：强制钩子只从缓存中获取数据，并忽略服务器。

示例

以下是一个示例，将 useQuery 钩子的 fetchPolicy 参数设置为 network-only，以强制始终从服务器获取数据：

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

const GET_USERS = gql`
  query getUsers {
    users {
      id
      name
    }
  }
`;

function Users() {
  const { loading, error, data } = useQuery(GET_USERS, {
    fetchPolicy: "network-only",
  });

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

  return (
    <div>
      {data.users.map((user) => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

在上面的代码中，我们将 fetchPolicy 参数设置为 "network-only"，这将强制 useQuery 钩子始终从服务器获取最新的数据，而忽略缓存。如果我们希望在首次加载组件时使用缓存数据，可以将 fetchPolicy 参数设置为默认值 "cache-first"。

结论

通过使用 fetchPolicy 参数，我们可以灵活地控制钩子是否应该使用缓存数据或以最新的数据从服务器获取数据。这对于需要绕过缓存的特殊情况非常有用。