突变后无法更新缓存

IT技术 javascript reactjs react-native graphql apollo
2021-05-02 09:53:30

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

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在突变内运行查询本身。

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
  }
}

Ps 请不要包含星号,只是为了将焦点放在丢失的属性上。