【问题标题】:unable to update cache after mutation突变后无法更新缓存
【发布时间】:2021-01-03 04:24:51
【问题描述】:

我有一个屏幕,我在其中运行查询并根据结果呈现一些项目:

query getMyFavoritePlaces($myID: String) {
  favorite_place(where: { user_id: { _eq: $myID } }) {
    id
    location
    label
    user{
      id
    }
    user_id
  }
}
const { data, error } = useGetMyFavoritePlacesQuery({ variables: { myID: profile.id }});
{
    data && (
    <FlatList
      data={data.favorite_place}
      renderItem={({ item }) => <FavoriteLocationEntry place={item} />}
      keyExtractor={(item) => item.id.toString()} />
    )
}

当我通过单击 flatlets 中的任何项目来运行此突变时:

mutation RemoveFavoriteLocation($id: Int!) {
  delete_favorite_place_by_pk(id: $id) {
    id
    location
    label
    user{
      favorite_places {
        id
         location
          label
      }
    }
    user_id
  }
}

对象被成功删除,UI 也被更新。但是,我收到警告

替换 Query 对象的 favourite_place 字段时,缓存数据可能会丢失。 为了解决这个问题,为 Query.favorite_place 字段定义一个自定义合并函数,以便 InMemoryCache 可以安全地合并这些对象:{ ... }

此处显示的值是 id。我已经在查询和突变中返回了 ID。那我该如何解决呢?

可能无法在突变中运行favourite_place 查询本身。

【问题讨论】:

    标签: javascript reactjs react-native graphql apollo


    【解决方案1】:

    您的变更需要包含用户的 id 字段,否则可能会错误地删除其他用户的 favourite_place 字段:

    mutation RemoveFavoriteLocation($id: Int!) {
      delete_favorite_place_by_pk(id: $id) {
        id
        location
        label
        user{
          **id**
          favorite_places {
            id
            location
            label
          }
        }
        user_id
      }
    }
    

    P.s 请不要包含星号,只是为了将焦点集中在丢失的属性上。

    【讨论】:

    • 不知何故,现在它没有发出警告,但现在它也没有更新用户界面......
    • 如果我添加缓存和网络的获取策略,那么它会给出相同的警告错误。你能推荐一个合并功能吗?
    • 如果我添加了一个网络获取策略,那么它会给出相同的警告错误,因为这个查询也在没有网络策略的其他屏幕上使用。我不想将 fetchPolicy: 'network' 添加到所有地方。
    猜你喜欢
    • 2020-05-09
    • 2022-11-11
    • 2020-02-03
    • 2021-03-24
    • 1970-01-01
    • 2020-12-19
    • 2019-11-26
    • 1970-01-01
    • 2021-01-19
    相关资源
    最近更新 更多