Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
M1ck0 opened this issue Oct 6, 2021 · 13 comments
Open

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

M1ck0 opened this issue Oct 6, 2021 · 13 comments

Comments

@M1ck0
Copy link

M1ck0 commented Oct 6, 2021

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.

image

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.

@ivpuser
Copy link

ivpuser commented Oct 13, 2021

Have faced the similar situation while using fragments.

network tab on the browser shows all the fields
but while accessing in the react component fields are missing,

i've also verified with the apollo extension in the chrome.

network-only : policy will yield proper responses
cache: has missing data.

@KPeschke
Copy link

I think I have the same problem with missing data with and without using fragments. Has anyone found a solution to the problem?

Here is my data example. All table cells are missing in react result, see console output.
e.g. the header content contains only __typename

API result in Chrome Network tab

{
    "data": {
        "report": {
            "tables": [{
                "header": {
                    "content": [{
                        "cells": [{
                            "alignment": "left",
                            "characteristics": {
                                "assessment": null,
                                "__typename": "TableCharacteristics"
                            },
                            "content": {
                                "content": "Sept. 2021",
                                "__typename": "TableStringContent"
                            },
                            "__typename": "TableCell"
                        },
                        {
                            ...
                        }],
                        "__typename": "TableRow"
                    }],
                    "__typename": "TableHeader"
                },
                "body": {
                    "content": [{
                        "cells": [{
                            "alignment": "left",
                            "characteristics": {
                                "assessment": null,
                                "__typename": "TableCharacteristics"
                            },
                            "content": {
                                "content": "Ohne Branche",
                                "__typename": "TableStringContent"
                            },
                            "__typename": "TableCell"
                        },
                        {
                            ...
                        }],
                        "__typename": "TableRow"
                    }],
                    "__typename": "TableBody"
                },
                "footer": {
                    "content": [{
                        "cells": [{
                            "alignment": "left",
                            "characteristics": {
                                "assessment": null,
                                "__typename": "TableCharacteristics"
                            },
                            "content": {
                                "content": "Total",
                                "__typename": "TableStringContent"
                            },
                            "__typename": "TableCell"
                        },
                        {
                            ...
                        }],
                        "__typename": "TableRow"
                    }],
                    "__typename": "TableFooter"
                },
                "__typename": "Table"
            }],
            "__typename": "Report"
        }
    }
}

Query in react component

const {loading, error, data} = useQuery<{report : ReportType}>(REPORT, {variables: {input:{report: id}}});

useEffect(() => {
        if (data && data.report) {
            console.debug({data.report});
        }
    }, [data]);

Console output

{
    "data": {
        "report": {
            "__typename": "Report",
            "tables": [{
                "__typename": "Table",
                "header": {
                    "__typename": "TableHeader",
                    "content": [{
                        "__typename": "TableRow"
                    }]
                },
                "body": {
                    "__typename": "TableBody",
                    "content": [{
                        "__typename": "TableRow"
                    }]
                },
                "footer": {
                    "__typename": "TableFooter",
                    "content": [{
                        "__typename": "TableRow"
                    }]
                }
            }]
        }
    }
}

@M1ck0
Copy link
Author

M1ck0 commented Feb 21, 2022

Apollo creates data in the cache using various items from the response. To disable caching you just need to set addTypename: false in the apollo client cache object. It won't use typename to create cache and it should work now.

cache: new InMemoryCache({
    addTypename: false
})

I guess the problem is when calling a query with the same typename. Apollo sees it in cache and decides to use cache instead.

I didn't go through this in-depth and have no idea what is really happening. This is something that was logical at the time, and it worked. Hope it helps you.

@KPeschke
Copy link

@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.

@M1ck0
Copy link
Author

M1ck0 commented Feb 22, 2022

@KPeschke I am glad if I was helpful. If you find some nice solution it would be great to post it here, just in case :)

@palmsey
Copy link

palmsey commented Sep 1, 2022

I'm running into this in a couple of different queries. One involves a fragment, another does not. Both use ... on SomeType in some way.

The queries fetch the expected data if you run them in Explorer or check the network tab, but the data from useQuery is missing all of the fields in the ... on section. The cache of the object is also missing these fields.

Setting the fetch policy of the query to no-cache fixes the issue, but I'd like to get my cache working.

Some things I've already verified:

  • possibleTypes are being generated and populated and look good to me
  • __typename is included in the query and results

Did any of you guys figure this out?

@M1ck0
Copy link
Author

M1ck0 commented Sep 2, 2022

@palmsey

Try to remove __typename from queries. It might help, unless you tried it already

@palmsey
Copy link

palmsey commented Sep 2, 2022

Without the __typename I don't think caching will work? That would address my issue (like using no-cache does), but I'd like to get this working with the cache.

@M1ck0
Copy link
Author

M1ck0 commented Sep 17, 2022

@palmsey are you sure that in your response all IDs are unique? and do you have id or _id in response

@landtechjoe
Copy link

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

@hbriese
Copy link

hbriese commented Jul 12, 2023

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

The issue is indeed caused by an interface fragment, but this didn't fix it. Only no-cache did

hbriese added a commit to zallo-labs/zallo that referenced this issue Jul 12, 2023
This is caused by an apollo client cache bug relating to interface fragments - apollographql/apollo-client#8898
@phryneas
Copy link
Member

@hbriese without a reproduction, we cannot do anything about cases like this.

As this issue is getting crowded at this point and I guess that there are people having at least three distinct problems that just show in similar ways: please create a reproduction and open a new issue for this.

@maslade
Copy link

maslade commented Feb 26, 2024

Hello, thread. I opened a new ticket describing one of the distinct problems referenced here: #11624

If you're running into missing fields when using fragments off of an interface, the above ticket is likely relevant to you and includes two work arounds. Neither is great, but it can help if this is blocking you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

9 participants