时间戳

首页 > 解决方案 > 突变后更新阿波罗缓存时出现不变违规错误

apollo - 突变后更新阿波罗缓存时出现不变违规错误

问题描述

我尝试在这篇文章删除项目后更新我的列表

但得到不变违规错误。

我的突变：

const deleteFn = useMutation<FeaturedPlaylistGroupDelete, FeaturedPlaylistGroupDeleteVariables>(deleteQuery, {

    update: (cache, mutationResult) => {
      console.log('mutationResult', mutationResult)
      const data = cache.readQuery({ query: featuredPlaylistsGroupsQuery })
      console.log('cache', cache)
      console.log('cacheData', data)
      cache.writeQuery({
        query: featuredPlaylistsGroupsQuery,
        data: data.filter((item) => item.id !== mutationResult.data.featuredPlaylistGroupDelete.id),
      })
    },
  })

精选播放列表组查询：

export const featuredPlaylistsGroupsQuery = gql`
  query FeaturedPlaylistGroups(
    $active: Boolean
    $noCategory: Boolean
    $dateFrom: String
    $dateTo: String
    $title: String
    $regions: [String!]
    $categories: [String!]
  ) {
    featuredPlaylistGroups(
      active: $active
      noCategory: $noCategory
      dateFrom: $dateFrom
      dateTo: $dateTo
      regions: $regions
      title: $title
      categories: $categories
    ) {
      active
      category {
        title
      }
      datetime
      id
      region
      title
    }
  }
`

删除查询：

const deleteQuery = gql`
  mutation FeaturedPlaylistGroupDelete($id: String!) {
    featuredPlaylistGroupDelete(id: $id) {
      active
      categoryId
      category {
        title
      }
      datetime
      id
      region
      title
    }
  }
`

错误：

不变违规：在对象 { ...

标签： apolloreact-apollo

解决方案

当您使用readQuery时，返回的是data该查询的响应部分中将返回的内容。这始终是一个对象。所以对于像这样的查询

query {
  foo
  bar
}

你得到一个像

{
  "foo": "FOO",
  "bar": "BAR"
}

当您readQuery使用您的调用时featuredPlaylistsGroupsQuery，您将获得一个具有名为 的单个属性的对象featuredPlaylistGroups。所以你的代码应该看起来更像：

const cached = cache.readQuery({ query: featuredPlaylistsGroupsQuery })
const featuredPlaylistGroups = cached.featuredPlaylistGroups.filter(item => {
  return item.id !== mutationResult.data.featuredPlaylistGroupDelete.id
})
const data = {
  ...cached,
  featuredPlaylistGroups,
}
cache.writeQuery({
  query: featuredPlaylistsGroupsQuery,
  data: data,
})

但是，这仍然行不通，因为featuredPlaylistsGroupsQuery需要许多变量。我们需要这些变量来从缓存中读取和写入，因为已查询的每个变量组合都单独存储在缓存中。因此，您要么需要跟踪使用的变量并在所有使用的组合上调用 readQuery/writeQuery，要么使用类似apollo-link-watched-mutation

推荐阅读