突变后反应阿波罗不更新数据

Posted 2023-03-10

【中文标题】突变后反应阿波罗不更新数据

【英文标题】：React apollo not update data after mutation

【发布时间】：2019-12-06 14:01:37

【问题描述】：

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

变异：

  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和以前一样，但是刷新页面后就正确了

【参考方案1】：

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

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

您的架构似乎允许获取更新用户的字段，但您的变异不会查询任何更新的字段。您应该获取应用所需的所有字段（例如，通过在 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。这通常适用于您的突变不返回所有更新的情况。我不会在这种情况下推荐它，但它对阅读这篇文章并试图明确获得这种行为的其他人会有所帮助。