创建突变后添加到 Apollo 客户端缓存中的数组

Posted

技术标签:

【中文标题】创建突变后添加到 Apollo 客户端缓存中的数组【英文标题】:Add to array in Apollo Client cache after create mutation 【发布时间】:2021-03-21 08:53:39 【问题描述】:

在通过突变创建项目后,尝试将项目自动添加到 Apollo 客户端中的缓存数组中,第 32 行出现 TypeScript 错误 (data: ):

Type ' [x: string]: TFetchResultData[]; ' is not assignable to type 'TQuery'.
  ' [x: string]: TFetchResultData[]; ' is assignable to the constraint of type 'TQuery', but 'TQuery' could be instantiated with a different subtype of constraint 'Record<string, TFetchResultData[]>'.ts(2322)
DataProxy.d.ts(17, 9): The expected type comes from property 'data' which is declared here on type 'WriteQueryOptions<TQuery, TVariables>'

这是完整的代码

import  ApolloCache, DataProxy  from '@apollo/client'

export const addToArray = <
  TVariables,
  TData,
  TFetchResultData,
  TQuery extends Record<string, TFetchResultData[]>,
  K
>(
  cache: ApolloCache<K>,
  
    query,
    variables,
    fieldName,
    newItem,
  : 
    query: DataProxy.Query<TVariables, TData>['query']
    variables: DataProxy.Query<TVariables, TData>['variables']
    newItem: TFetchResultData
    fieldName: keyof TQuery
  
): void => 
  // Add to the documentFiles field, if it exists
  const queryResult = cache.readQuery<TQuery, TVariables>(
    query,
    variables,
  )
  if (queryResult) 
    cache.writeQuery<TQuery, TVariables>(
      query,
      variables,
      data: 
        [fieldName]: [...queryResult[fieldName], newItem],
      ,
    )
  

【问题讨论】:

【参考方案1】:

Typescript 抱怨 TQuery 可能有其他字段将被您的代码剥离。

...queryResult 添加到您的writeQuery 代码:

cache.writeQuery<TQuery, TVariables>(
  query,
  variables,
  data: 
     ...queryResult,
    [fieldName]: [...queryResult[fieldName], newItem],
  ,
)

【讨论】:

以上是关于创建突变后添加到 Apollo 客户端缓存中的数组的主要内容,如果未能解决你的问题,请参考以下文章

突变后使用订阅和更新创建重复节点 - 使用 Apollo 客户端

如何在 Apollo / GraphQL 发生突变后更新缓存?

在 Apollo 客户端上更新缓存

将对象数组添加到突变 react-graphql-apollo-mongoose 时,“无法读取未定义的属性 'get'”

如何从突变查询中更新 Apollo 数据存储/缓存,更新选项似乎没有触发

使用 writeQuery() 更新 Apollo 客户端上的缓存