Hi there, I have a SSR / cache problem that I’m trying to solve, and was wondering what we’re doing wrong here.
We have a component which have jsx similar to this:
<div>
{topicIds.map(tid => {
return <Topic key={tid} topicId={tid} subjectId={subjectId} />
})
</div>
But only the last of the queries performed in topic is restored from cache.
If the list only contains one of the elements (No matter which one) the restoring works as expected.
in the Topic component we do useQuery with the topicId and subjectId props.
The query looks like this:
query topicWrapper($topicId: String!, $subjectId: String, $transformArgs: TransformedArticleContentInput) {
topic(id: $topicId, subjectId: $subjectId) {
id
...Topic_Topic
}
resourceTypes {
...Topic_ResourceTypeDefinition
}
}
${topicFragments.topic}
${topicFragments.resourceType}
If i set a breakpoint and inspect our cache after restoring it on the client contains a cache.data.data.ROOT_QUERY["topic({\"id\":\"topicid1\",\"subjectId\":\"subjectid1\"})"]
entry for all the topics i want. That has a _ref to the topicId also found in the data.data part of the object.
Not sure what we’re doing wrong as similar stuff works other places in the codebase afaict.
Real code in here
Real code can be found on github NDLANO/ndla-frontend (Link below to specific files)
- Component performing query: TopicWrapper.tsx
- Component iterating
TopicWrapper: SubjectPageContent.tsx - Apollo client cache restoring is done in: client.tsx with help from apiHelpers.ts
- Apollo client cache extraction is done in: defaultRender.tsx