React apollo 在突变后不更新数据 [英] React apollo not update data after mutation

问题描述

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

I have user and user update form, but the problem is that user data in a web app is not updated after mutation.

突变:

  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 组件上使用它:

I use it on my UserItem.tsx component:

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

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

Problem is after mutation usersItem is the same as before, but it`s become correct after page refresh

推荐答案

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

You seem to be assuming that the cache is updated from your input type. While this seems like something a smart cache might be able to do, we have to keep in mind, that GraphQL makes no assumptions about the shape of mutations and what has been updated. Not all mutations follow the the simple schema of UpdateInputObject + ID. So only the implementation knows what really gets updated and the client making assumptions about this could go really wrong. The implementation may give hints though on which objects have been updated by providing a result type as discussed in the next paragraph.

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

GraphQL allows us to let mutations return a payload that contains updated items. It becomes a task of good mutation design to return all the updated items.

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

Your schema seems to allow fetching fields on the updated user but your mutation does not query any updated fields. You should either fetch all the fields that your app needs (e.g. by using the same fragment in the userById query and the mutation) or simply fetch all fields that are updated through the mutation:

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

另外一件事:假设您发现自己处于每个字节都很重要的特定情况(也许您正在为极低带宽开发应用程序)，技术上可以进行您期望的更新手动使用 缓存读取和写入.这通常适用于您的突变不返回更新的所有内容的情况.我不会在这种情况下推荐它，但它可以帮助其他人阅读这篇文章并试图明确获得这种行为.

One more thing: Assuming you find yourself in the specific situation where every byte counts (maybe you are developing an app for extremely low bandwidth) it is technically possible to do the update that you are expecting manually using cache reads and writes. This is usually for the case when your mutation does not return everything that is updated. I would not recommend it for this case but it can be helpful for others reading this post and trying to get this behaviour explicitly.

这篇关于React apollo 在突变后不更新数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！