Relay: [Modern] Expose api to programmatically query and update store?

[joonhocho]

Sometimes, I really wish there is a way to imperatively (programmatically) query server and update the store.

I wish two such apis are publicly exposed:

1. manually query and update the store.
2. update the store with plain json objects (external data).

Reasons are:

1. not all data are bound to UI elements.
   
   
   
   • some data are meant to be used internally.
   
   
2. Using refetch can over-fetch data if not broken down to smaller elements.
   
   
   
   • requires sometimes unnecessary breakdown of UI elements into smaller components for fine-grained refetch (more boilerplate).
   
   
3. Refetching multiple small components in different ui subtree means many number of separate queries sent to server.

Example)
This is just a simplified example.

navigation stack
Home -> Me -> Friends -> Friend -> Friends -> Me -> Me Edit

Initially on editMeMutation's payload, I included all possibly affected data query.
Then, I realized that it was slowing down the mutation response, because it was slow to query all the information that might have been affected for every edit mutation.
So, I minimized mutation payload to quickly get the mutation response and then decided to refetch relevant refetch containers.
Since refetch containers refetches everything in its query, it was wasteful.
I had to break down refetch containers into smaller nested refetch containers.
Now it was querying the right amount, but then it was sending many separate queries (more burden on the server) and some of them were duplicate since the same component could be rendered multiple times on a screen and also over many navigation stacks.
It's already too much work, it's hard to manage, and codes are getting bloated unnecessarily.
It would be much simpler if I could just programmatically query and update the store.

I'd also like to save some important data to the local disk and use it with relay in offline mode.
This requires serializing and deserializing relay data from store.

[rodrigopr]

For simple field loading/refetch i'm doing:

import { fetchQuery } from 'react-relay';

const refreshQuery = graphql`
  query MyComponent_refreshQuery {
     ...
  }
`;
fetchQuery(enviroment, refreshQuery, { arg1: 123 });

And it does update the store in my case.

That might be enough for the scenario you described, but I don't think it's a solution for populating the store in general (keep/pass the loaded data to child fragments, etc).
I'm saying that because fetchQuery don't seem to guarantee the loaded data will be retained on the store, so it could be garbage-collected at some point (someone correct me if I'm wrong).

[joonhocho]

@rodrigopr Awesome! I will try this!

[sibelius]

@joonhocho is this still needed? you can get the store using

Environment.getStore() and apply any operations to store as we do in updater functions of mutations

[sibelius]

I think we can close this

use fetchQuery to consume data from store

check this 2 blog post of how to use some relay environment methods that could be also useful

https://babangsund.com/relay_environment_methods/
https://babangsund.com/relay_environment_methods_2/