Help me understand why a request is not loaded from cache after SSR?

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

Turns out this was due to our Topic type also having a field called subtopics which were also of [Topic!] type, but we didn’t ask for all the same fields (Actually just missing one of the subtopic fields in the main Topic query.)

The fix was simply to add that field to our main topic and we were good to go.

BUT this issue was a pain to debug, is there a good way of approaching these kinds of issues?
Or even a way to test for them to prevent them from happening?

Maybe log a warning if something is cached, but misses fields or something along those lines?