How does relay cache work?

Question

I read through the relay cache documentation, but it felt confusing.

Can anyone explain how does the primeCache work and how it should/could be used?

First things first, I'm not even 100% positive whether the cache is in browser, or in the server side? I would guess it's in the browser, since they do talk about client caching, am I right?

I also have read this question, and it confuses me more. It says

If the Flux stores need access to server data, they can use the Relay.Store APIs to fetch data from the server and read it from the cache.

I don't understand, if it is going to read it from the cache, then why would it need to fetch data from the server? No logic in that to be honest. Unless if it's really a server cache instead of a browser cache? Also if you look at the Relay documentation about Relay.Store (which does relate to the primeCache), they say that:

The Relay Store provides an API for dispatching mutations to the server.

And if I have understood correctly, those mutations change data in the server side. Which means they do query the server side through the store. And because you use the store to access the primeCache, it could imply that the cache could really be server side mm..

What about when can you call the primeCache? What if there isn't anything inside the cache and you call it? Does it then get the result from the server?

Please help

Answer 1

You've got the gist of it. The idea behind Relay is that it helps you "component-ize" your queries and mutations just like React does for your HTML. Relay combines your React components with that's needed specifically for that component and renders it optimally to your frontend app.

Now, the cache works by associating each piece of data with a unique ID. And the declarative queries and mutations that you make to the GraphQL server through Relay will find that piece of data on the server, compare that with your frontend cache via that unique identifier, and update only the differences. You can imagine it as though it's a version control for your data on your frontend managed by this engine called Relay cache.