I’m trying to get data from Apollo cache. I know that data is there because in Apollo dev tools specified records are available.
In my react app I making a simple click and set Id which later passes to the query. Result from client.readQuery(...) is null. I’m spinning around because don’t know why. I’m using code exactly the same way as in docs.
Here’s a QUERY:
query Recruit($id: ID!) {
Recruit(_id: $id) {
_id
firstName
}
}
Usage of apollo hooks in component:
const client = useApolloClient();
const recruit = client.readQuery({
query: RECRUIT_QUERY,
variables: { id: selectedId }
})
Configuration of apollo:
export const client = new ApolloClient({
link: concat(
authMiddleware,
new HttpLink({
uri: process.env.REACT_APP_API_URL,
}),
),
cache: new InMemoryCache(),
});
Here’s apollo store preview:
Here you’re passing in an id variable, but your query is expecting an _id variable. You’ll want to make sure the variable names you use match.
Did you ever resolve this?
@hwillson I believe OPs variables are correct, his query is expecting $id which then passes in as _id.
I have the same problem. In my case query looks like this:
query Todo($id: ID!) {
Todo(id: $id) {
id
completed
title
}
}
using the query here:
client.readQuery({ query, variables: { id } });
client config:
export const client = new ApolloClient({
cache: new InMemoryCache()
});
and store preview:
Same as OP readQuery returns null
I’m using latest @apollo/client: 3.7.0 I came across the same problem on multiple projects and have never been able to resolve this.
I forgot to mention there is also codesandbox - apollo client example - CodeSandbox with the issue.
Going through the error in debugger I can see this message
Which makes sense but then I don’t understand how is the readQuery example from the docs meant to be used
Great questions all - @patrikniebur as you pointed out, Todo is not in your schema. Per the docs page you linked:
If your cache contains data for all of the query’s fields, readQuery returns an object that matches the shape of the query:
…
If the cache is missing data for any of the query’s fields, readQuery returns null. It does not attempt to fetch data from your GraphQL server.
So if you were to add Todo to your schema in a manner that matched the query you were trying to execute, that would likely resolve the issue.
@gtarnowski I know it’s more than a year later, I’m wondering if maybe you were experiencing a similar issue where Recruit is not a field in your root query?
Thanks for the response @JeffAuriemma, I’m not sure I follow how to resolve the problem.
My assumption was (which is probably incorrect) that if I have normalized object in a cache, I will be able to retrieve it using its type name and provided ID but this doesn’t seem to work unless I explicitly write this object using the same query. I assume this is the same problem that @gtarnowski was facing.
I’m really keen to fully understand this for the purposes of writing an article on how use cache and hopefully helping improve the docs too. Please let me know if I need to provide better example to help explain the issue.
After some more googling I came across advanced caching page that provides an example how to make this work.
It all makes sense now, it was the readQuery example in the docs that got me confused and made me think it was default behaviour.
1 Like
I know some time has passed, but I attempted to explain this a bit further in this comment. Hopefully this also provides some clarification to the behavior.
