突变后更新阿波罗缓存时发生不变冲突错误

Question

我尝试通过此 article

删除项目后更新我的列表

但出现不变违规错误。

我的突变：

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

featuredPlaylistsGroupsQuery:

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

错误：

Invariant Violation: Can't find field featuredPlaylistGroups({}) on object { ...

Answer 1

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

这样的查询

query {
  foo
  bar
}

你得到一个像

这样的对象

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

当您使用 featuredPlaylistsGroupsQuery 调用 readQuery 时，您将获得一个包含单个属性且名为 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

之类的东西

突变后更新阿波罗缓存时发生不变冲突错误

Invariant Violation error when updating apollo cache after mutation

apollo

react-apollo