Apollo客户端-错误:无法识别对象

Question

Client-React，Apollo Client，codegen

服务器-Postgraph文件

文件对象的应用程序视图列表。

用户可以添加新文件。

我编写了一个从服务器获取文件对象的查询。

以及用于添加新文件的突变。

他们都工作。

我试图实现的是用新文件更新缓存的文件，并重新呈现包含FilesQuery钩子的组件。

我跟随这位医生：https://www.apollographql.com/docs/react/data/mutations/#the-更新功能

但是调用cache.writeFragment一直抛出错误：

Error: Could not identify object {"id":"de5b015b-28a8-4066-a5ed-44dcead659ed","createdAt":"2022-10-14T14:51:14.874548645","updatedAt":"2022-10-14T14:51:14.874550045","originalFileName":"MY_FILE.xlsx",...}

文件查询

query FileUploads(
$offset: Int = 0
$first: Int = 10
$orderBy: [FileUploadsOrderBy!] = [CREATED_AT_DESC]
$filter: FileUploadFilter
) {
fileUploads(
first: $first
offset: $offset
orderBy: $orderBy
filter: $filter
) {
totalCount
nodes {
id
uploaderOrgId
uploadFileType
counterPartiesCount
parsedPointsCount
effectiveDate
originalFileName
configFileName
createdAt
status
partiesIds
parsedFileUrl
uploadingOrg {
id
shortName
}
entitiesAndCps {
entities {
id
shortName
}
cps {
id
shortName
}
}
}
}
}

表组件(调用FileUploadsQuery(

const FileUploadsTable = () => {
const { data, loading, error } = useFileUploadsQuery();
...
}

突变-更新

update(cache, { data }) {
cache.modify({
fields: {
fileUploads(existingFileUploads = {}) {
const newFileUplodsRefs = (
data?.uploadToService?.result as any[]
).map((file) => {
return cache.writeFragment({
data: file,
fragment: gql`
fragment NewFileUpload on FileUpload {
id
uploaderOrgId
uploadFileType
counterPartiesCount
parsedPointsCount
effectiveDate
originalFileName
configFileName
createdAt
status
uploadingOrg {
id
shortName
}
entitiesAndCps {
entities {
id
shortName
}
cps {
id
shortName
}
}
}
`,
});
});
return [
...(newFileUplodsRefs as any[]),
...(existingFileUploads?.nodes || []),
];
},
},
});
},

编辑1

我成功地通过了

cache.writeFragment({
id: `FileUpload:${file.id}`, <--
data: file,
fragment: gql`
fragment NewFileUpload on FileUpload {
id
}
`,
});

还将返回对象更改为：

return {
nodes: [
...newFileUplodsRefs,
...(existingFileUploads?.nodes || []),
],
};

在显示FileUploads的组件中，我仍然没有看到重新渲染。

(组件为FileUploadsTable(

Answer 1

解决方案

apolloClient

import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
import isEmpty from 'lodash/isEmpty';
const cache = new InMemoryCache({
typePolicies: {
Query: {
fields: {
shells: {
keyArgs: (args, context) => {
const {
variables: { filter, runFilter } = {},
fieldName,
} = context;
return `${fieldName}${
isEmpty(filter) && isEmpty(runFilter)
? ''
: ':' + JSON.stringify({ filter, runFilter })
}`;
},
merge(existing = [], incoming, { args, cache, variables }) {
const { offset = 0 } = args;
if (Array.isArray(existing)) {
return incoming;
}
const merged = { ...existing, nodes: existing.nodes.slice(0) };
for (let i = 0; i < incoming.nodes.length; ++i) {
merged.nodes[offset + i] = incoming.nodes[i];
}
return merged;
},
},
},
},
},
});
export const apolloClient = new ApolloClient({
cache,
link: new HttpLink({
uri: `${
typeof window === 'undefined' ? 'http://localhost:3009' : window.origin
}/frm/api/graphql`,
}),
defaultOptions: {
query: {
fetchPolicy: 'cache-first',
},
},
});

外壳组件

const loadMoreShells = async (page: number) => {
setIsPageLoading(true);
await fetchMore({
variables: {
first: SHELLS_PER_PAGE,
offset: SHELLS_PER_PAGE * (page - 1),
filter: { ...filter, ...{ pinned: { equalTo: false } } },
runFilter: runFilter ? { run: runFilter } : undefined,
orderBy: [
STATUS_ASC,
SHELL_RUNS_MAX_CREATED_AT_DESC,
EXECUTION_FROM_DESC,
],
},
});
};