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

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屋！