首页 > 解决方案 > 替换时可能会丢失 Apollo Client Cache 数据

问题描述

我是 react、graphql 和 apollo 世界的新手。我有一个工作正常的用户分页表,并且在网格中有编辑和删除按钮。编辑没问题,但是当我选择删除用户按钮时,用户将从数据库(mongoDb)中删除,并且它也从列表中删除,但我继续收到此警报消息:

Cache data may be lost when replacing the users field of a Query object.

To address this problem (which is not a bug in Apollo Client), define a custom merge function for the Query.users field, so InMemoryCache can safely merge these objects:

  existing: [{"__ref":"User:5fd1640bd374d210469efce9"},{"__ref":"User:5fd3a3ca7f8c0751ad7be34f"},{"__ref":"User:5fd3ce447f8c0751ad7be351"}]
  incoming: [{"__ref":"User:5fd1640bd374d210469efce9"},{"__ref":"User:5fd3ce447f8c0751ad7be351"}]

For more information about these options, please refer to the documentation:

  * Ensuring entity objects have IDs: https://go.apollo.dev/c/generating-unique-identifiers
  * Defining custom merge functions: https://go.apollo.dev/c/merging-non-normalized-objects

我对这个突变的代码是:

  const [delUser] = useMutation(DELETE_USER, {
    update(proxy, result) {
      if (result) {
        showMessage({
          type: "success",
          title: "Message",
          message: "User deleted",
        });
        const data = proxy.readQuery({
          query: GET_USERS,
          variables: { take, skip, filter },
        });
        const newUsers = data.users.filter((u) => u.id !== selectedUser);
        const newData = { totalUsers: newUsers.length, users: newUsers };
        proxy.writeQuery({
          query: GET_USERS,
          variables: { take, skip, filter },
          data: newData,
        });
        setSelectedUser(null);
      }
    },
    onError(err) {
      setSelectedUser(null);
      setErrors(err.graphQLErrors[0].message);
    },
    variables: { id: selectedUser }
  });

如果用户对象已经有 ID,我怎么能摆脱这些警报,或者如果这个对象没有特定字段并且我已经为用户创建了 typePolicy,我如何定义自定义合并函数,在编辑用户中需要字段联系人零件?我还尝试包含一个 refetchQuery 选项。

标签: cachinggraphqlapollomutation

解决方案


推荐阅读