使用cache.modify更新字段后未调用自定义合并函数

Question

我为 Session 类型上的 products 字段编写了一个自定义合并函数。似乎合并函数仅在我使用其 products 初始化对象 Session:1 时被调用，而不是在我稍后使用 products 更新时被调用缓存.修改。

我的合并功能：

const client = new ApolloClient({
  uri: 'http://localhost:8081/graphql',
  cache: new InMemoryCache({
    typePolicies: {
      Session: {
        fields: {
          products: {
            merge (existing, incoming) {
              // this is only being called on useQuery(HydrateSession), not useMutation(UpsertProduct)
              console.log('existing', JSON.stringify(existing, null, 2))
              console.log('incoming', JSON.stringify(incoming, null, 2))
              // remove duplicates when latestProduct has the same id as an existing product — [..., latestProduct]
              if (incoming.filter(p => p.id === incoming[incoming.length - 1].id).length > 1) return existing
              return incoming
            }
          }
        }
      }
    }
  })
})

Session的初始化：

const HydrateSession = gql`
  query {
    session {
      id
      products {
        id
      }
    }
  }
`

...

useQuery(HydrateSession)

稍后使用cache.modify更新products：

const UpsertProduct = gql`
  mutation UpsertProduct($product: ProductInput!) {
    upsertProduct(product: $product) {
      id
    }
  }
`

...

const [upsertProductMutation] = useMutation(UpsertProduct)

const onClick = async () => {
  await upsertProductMutation({
    variables: {
      product: {
        id: 2
      }
    },
    update: (cache, mutationResult) => {
      cache.modify({
        id: 'Session:1',
        fields: {
          products: previous => [...previous, mutationResult.data.upsertProduct]
        }
      })
    }
  })
}

我在这里有一个完整的工作示例https://github.com/jsindos/apollo-play，运行 npm i 然后启动两个单独的进程npm start 和 npmserve。单击触发突变的按钮后，合并功能不会运行（从控制台中缺少 console.log 语句可以看出）。

Answer 1

modify 会绕过您定义的任何合并函数，这意味着字段始终会被您指定的值完全覆盖。

• https://www.apollographql.com/docs/react /caching/cache-interaction/#using-cachemodify

阅读文档是一件好事。