创建突变后添加到 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 发生突变后更新缓存?
将对象数组添加到突变 react-graphql-apollo-mongoose 时,“无法读取未定义的属性 'get'”