Apollo doesn't show all the data that is fetched.

Intended outcome:

I am making a simple query to the Apollo Server on the backend. The query looks like this

getAllOffers {
  id
  product {
    id
    name
  }
}

Each offer is an item that has a product object. It should return an array of offers, where every offer has an id and product object with requested fields.

Actual outcome:

When I run this query it executes without triggering any errors, but the problem is that the product name is always null.

This is how I run query

const { refetch } = useQuery(GET_ALL_OFFERS, {
  fetchPolicy: "network-only",
  notifyOnNetworkStatusChange: true,
  onCompleted: (d) => {
    console.log(d?.getAllOffers);
  },
});

When I console.log() response product’s name is null. This wouldn’t be strange if the product name was indeed null. First, we thought that it might be a problem on the backend but here is a picture that really confuses us.

As you can see on the image above, every product has a name and ID in the Network tab in the Google Chrome console. The same is with Firefox and Vivaldi, but when I try to console.log() the data in the useQuery name is null.

How to reproduce the issue:

I have no idea how to reproduce this. First time seeing it happen.

Versions

System:
  OS: Linux 5.13 Manjaro Linux

Binaries:
  Node: 16.10.0 - /usr/bin/node
  Yarn: 1.22.11 - /usr/bin/yarn
  npm: 7.24.1 - /usr/bin/npm

npmPackages:
  @apollo/client: ^3.4.16 => 3.4.16

I also tried it on Ubuntu and Windows. Same thing.

[KPeschke]

@M1ck0 Thank you for your input.

Although addTypename: false did not lead to the desired result for me, it did lead me in the right direction in which I need to search.

It is indeed a problem with the query cache. I connected the Apollo Chrome Extension with the ApolloClient and was able to reproduce this phenomenon. As soon as I loaded the query from the cache, the “cells” were missing from the result.

Currently, I have set the fetchPolicy: 'no-cache' for this query only and am now looking to see if I can solve this a bit more elegeantly.

[landtechjoe]

I came across this problem after updating apollo and was getting reasonably certain it was a problem with the library not matching the fragments correctly. Was just starting to work on a fix when I found the information on possibleTypes and how they work with Fragments. Assuming people here are using fragments with Graphql types that use type Y implements X then adding the possibleTypes types when instantiating the InMemoryCache might fix it for you?

new InMemoryCache({
  possibleTypes: {
    X: ["Y"]
  }
});

https://www.apollographql.com/docs/react/caching/cache-configuration/#possibletypes