React apollo 在突变后不更新数据

Question

我有用户和用户更新表单，但问题是网络应用程序中的用户数据在突变后没有更新。

突变：

  mutation UserUpdate($user: UserUpdateInput!, $id: String!) {
    userUpdate(user: $user, id: $id) {
      id
    }
  }

查询：

  query UsersItemQuery($id: String!) {
    userById(id: $id) {
      id
      email
      datetime
      firstName
      lastName
      middleName
      phone
      role
      podcasts {
        id
        title
      }
    }
  }

我在我的 UserItem.tsx 组件上使用它：

const usersItem = useQuery<UsersItemQuery, UsersItemQueryVariables>(usersItemQuery, { variables })

突变后的问题usersItem和之前一样，但是刷新页面后就正确了

Answer 1

您似乎假设缓存是根据您的输入类型更新的。虽然这看起来像是智能缓存可以做的事情，但我们必须记住，GraphQL 不会对突变的形状和已更新的内容做出任何假设。并非所有变更都遵循 UpdateInputObject + ID 的简单模式。所以只有实现知道真正更新了什么，而客户对此做出假设可能会出错。该实现可能会通过提供下一段中讨论的结果类型来提示哪些对象已更新。

GraphQL 允许我们让突变 return 包含更新项目的有效负载。 return所有更新项成为良好突变设计的任务。

您的架构似乎允许获取更新用户的字段，但您的变更不会查询任何更新的字段。您应该获取您的应用程序需要的所有字段（例如，通过在 userById 查询和变更中使用相同的片段）或者简单地获取通过变更更新的所有字段：

  mutation UserUpdate($user: UserUpdateInput!, $id: String!) {
    userUpdate(user: $user, id: $id) {
      email
      datetime
      firstName
      lastName
      middleName
      phone
      role
      podcasts {
        id
        title
      }
    }
  }

还有一件事：假设您发现自己处在每个字节都很重要的特定情况下（也许您正在为 极低带宽 开发应用程序），技术上可以做到使用 cache reads and writes 手动更新您期望的内容。这通常适用于您的突变没有 return 更新所有内容的情况。我不建议在这种情况下使用它，但它可以帮助其他人阅读此 post 并尝试明确获得此行为。

React apollo 在突变后不更新数据

React apollo not update data after mutation

graphql

apollo

react-apollo