Does Apollo cache the queries made from a Query component?

Question

I have one Query component that retrieves data from a GraphQL server and everything works great.

There's a stateless child component I'm currently passing props to, and I would like to make it propless by setting it to read data from the local Apollo cache (the child component can never be loaded prior to the parent component).

I'm getting an error though. I understand from the docs that the readQuery method fails if there's nothing in the cache, but that's what confuses me: the data should be in the cache as it's loaded before in the parent component. Or is it not?

Here's the source code:

• Parent Component
• Child Component
• Queries

Answer 1

Calling readQuery simply reads from the cache once, which is almost never what you want. The Query component subscribes to changes in the cache and will trigger a network request on a cache-miss (assuming you're using the default cache-first fetch policy). You can safely utilize multiple Query components across your app for the same query -- as long as they use the same variables, rendering multiple Query components will only result in a single request to your server.

readQuery should only be used inside update functions when you need to read and then update a part of the cache -- don't use it to provide data to your components. If you only want to read from cache, there's a cache-only policy you can use, but again, this is rarely needed because Apollo is smart enough to know when a query is in flight.