Apollo Client client.readQuery returning null when data is in the cache

Question

This must be user error, but I've got an app with a simple currentUser query that looks at a JWT for an id, looks it up, and returns the appropriate user.

I can look at devtools and see that it's in the cache as __ref:User:19

export const CURRENT_USER_QUERY = gql`
  query{
    currentUser {
      id
      fullName
      email
    }
  }
`

But in my component, when I do const { currentUser } = client.readQuery({ query: CURRENT_USER_QUERY }); it (intermittently) blows up because:

Cannot destructure property 'currentUser' of 'client.readQuery(...)' as it is null.

User:19 exists and is all the stuff I need. I hit reload, and that same page works.

I have my default error policy set to "all" in the client.

This is version 3.3.11 of the client. Chrome v88.04, for what that's worth. React 17.01.

Am I missing something here? Should that not return a value synchronously (and dependably) if that item's in the cache?

Is there a better way to deal with that situation? I'm trying to move this app away from storing things in redux or some context provider since it's already being handled by Apollo. Seems redundant to have that responsibility handled by a bunch of different things.

The idea is right, just watch out for any race condition that might be happening depending on where you read the original data in using `useQuery` — Vandesh, Mar 23 '21 at 09:59

score 6 · Answer 1 · edited Sep 30 '21 at 21:06

6

I was facing issues with .readQuery() last night. I was getting null returned everytime, though the logic was right. I was calling .readQuery() within a component I imported into my React page.

What ended up being my issue is that I was not updating the same query I made in the "parent" react page as the one in the component.

I don't know if this is the same problem you're running into, but I thought I'd leave this here for perpetuity and perspective.

edited Sep 30 '21 at 21:06

allo

3,955
8
40
71

answered Sep 30 '21 at 19:34

Anthony Peña

171
1
7

2

Indeed, you need to use the same query, else the cache won't find it. Apparently, that was my problem too, thx! – DBencz Oct 27 '21 at 15:57

score 4 · Accepted Answer · edited Oct 24 '22 at 15:06

4

I was facing the same issue. I fixed it like this:

const existingData = cache.readQuery({
   query: GET_CONTRACT,
   variables: {
       ...variables, // fixed: passing the same reference to variables
   },
});

edited Oct 24 '22 at 15:06

Community

1
1

answered Jul 13 '21 at 23:33

Alia Anis

1,355
11
7

1

I don't see what you're saying "fixed it"? – CrustyRatFink Jul 15 '21 at 00:08
I got the same error as mentioned above, and have shared how I was able to retrieve info from cache. – Alia Anis Jul 29 '21 at 08:59
@Alia Thanks for your answer. Adding the same variables as my initial query allowed me to retrieve the data from the cache. – Nick Gelotte Aug 10 '21 at 19:13
@NickGelotte Great, happy to help :D – Alia Anis Aug 12 '21 at 08:30
Ah, @Alia, I see what you're saying, but in my case, there were no variables. `currentUser` was the query, and it referenced a User in the cache with an ID. For what it's worth, this issue seems to have "gone away" recently. At least, I haven't encountered it since. – CrustyRatFink Oct 01 '21 at 20:36
@Alia where can i get variables? writing by hand is bad – Сергей Савельев Jan 31 '22 at 13:20
why would I need to add the same query? This makes no sense. Since I am working with pagination and cursors its more or less impossible because the cache gets updated with different variables used in each query. – felixmp May 31 '22 at 20:02

score 1 · Answer 3 · answered Dec 23 '21 at 13:28

1

The problem here can be in new variables or absence of variables. So the query was made with variables and you try to get it from the cache without. .readQuery from cache must be identical

answered Dec 23 '21 at 13:28

Maksym Krugliachenko

323
4
12

score 0 · Answer 4 · answered Nov 11 '22 at 03:58

You need to pass the same variable with the same values you use when executing the mutation and in the same order

existingData = cache.readQuery({
   query: QUERY_NAME,
     variables: {
        x: mutationValue1,
        y: mutationValue2
        z: mutationValue3
   },
 });`

Apollo Client client.readQuery returning null when data is in the cache

4 Answers4

Linked