reactjs - 如何在 apollo 客户端中更新查询？

Question

假设我有一个像这样的简单数据模型

User
 - email
 - password
 - Profile
    - profile_image
    - address
    - phone_number

当我访问用户的个人资料页面时，我使用 useQuery 从服务器查询用户

const ME = gql`
  query {
    me {
      email
      profile {
        profileImage
        address
        phoneNumber
      }
  }
`; 
const {loading, data, refetch} = useQuery(ME);

当我想更新个人资料时。我会这样做

const UPDATE_PROFILE = gql`
  mutation($profileImage: String!, $address: String!, $phoneNumber: String!) {
    updateProfile(profileImage: $profileImage, address: $address, phoneNumber: $phoneNumber) {
      profileImage
      address
      phoneNumber
    }
  }
`;

const [updateProfile, {loading}] = useMutation(UPDATE_PROFILE, {
  onCompleted(data) {
    // Refetch to refresh whole user data
    refetch();
  }
}

我只想在页面中显示新更新的用户信息，所以我所做的是从 useQuery(ME) 调用 refetch()。

但我发现我可以使用这个 doc 中的 refetchQueries() .哪个会是更好的选择？它们有什么区别？

Answer 1

refetchQueries和refetch的区别:

• refetchQueries:您可以在突变后重新获取任何查询，包括您的 ME 查询或其他查询，如 getMessageList、 getListUser,...

  refetchQueries is the simplest way of updating the cache. With refetchQueries you can specify one or more queries that you want to run after a mutation is completed in order to refetch the parts of the store that may have been affected by the mutation (refetchQueries doc).

• refetch:当您使用 refetch 时，您可以重新获取查询 ME，这是 useQuery 的结果之一(我)。

  A function that allows you to refetch the query and optionally pass in new variables (refetch doc).

在你的例子中，如果你想重新获取你的 ME 数据，你可以使用 refetch。另一方面，如果您想更新其他查询，您应该使用 refetchQueries。
根据我的经验，我更喜欢在突变后使用 refetchQueries 而不是使用 refetch。