How to prepare and hydrate Relay state? - relayjs

Question

I want to fetch queries server-side and then hydrate relayjs Store when the client-side application loads. Relay documentation currently does not mention what are the building blocks required to build and hydrate its state.

Answer 1

We need three things:
create Relay store
populate Relay store with the desired state
serialize Relay store and pass it to the client
A Relay store is handled by Relay Environment. This means that in order for us to populate Relay store with queries, we have to execute them in the context of a Relay Environment, e.g.
import { Environment, Network, RecordSource, Store } from 'relay-runtime';
export const createRelayEnvironment = (apiUrl: string): Environment => {
const recordSource = new RecordSource();
const store = new Store(recordSource);
const network = Network.create((operation, variables) => {
return fetch(apiUrl, {
body: JSON.stringify({
query: operation.text,
variables,
}),
headers: {
'content-Type': 'application/json',
},
method: 'POST',
}).then((response) => response.json());
});
return new Environment({
handlerProvider: null,
network,
store,
});
};
Then all you need to do is run a query and serialize the Relay Store, e.g.
const relay = createRelayEnvironment('https://contra.com/api/');
const appPreloadResponse = await fetchQuery<AppPreloadQuery>(
relay,
appPreloadQuery,
{},
{
fetchPolicy: 'store-or-network',
}
).toPromise();
const htmlHead = `
<script>
window.RELAY_RECORD_MAP = ${stringify(relay.getStore().getSource().toJSON())};
</script>
`;
On the client-side, you simply need to create Relay Environment using the earlier serialized state, e.g.
export const RelayEnvironment = new Environment({
network: Network.create(fetchQuery, subscriptionHandler),
store: new Store(
new RecordSource(window.RELAY_RECORD_MAP),
),
});
And that's it!