[Documentation] What is a good way to share state between routes?

[hegelstad]

What are the best practices?

For instance, you'd often have multiple routes with each of their query, which in turn makes it hard to share fragment pointers. How do you recommend to share data such as currentUser and other types of state between components?

[sibelius]

can you provide a more concrete example with code?

[hegelstad]

@sibelius hey, thanks for waiting so long 😰

More concretely put:

In the issue-tracker example. Let's say you select an issue, then this issue will be opened in a new detail view and the data is preloaded with a new query belonging to a route. However, that also means that the state, which is an id in this case, must be stored in the url bar, so that the route that is navigated to can access that state to figure out what to render in detail view.

So my question then becomes, let us say you that you would like to use some state to preload a query but you don't want to put the state in the URL as part of the route, how would you do that?

[sibelius]

what kind of state?

[hegelstad]

Selected item id from a list of items

[sibelius]

it is still not clear, you could save this on a context, or client schema extension (https://relay.dev/docs/en/local-state-management), or Recoil, or using react router history state

[hegelstad]

For the suggestions apart from react router history state, how would you access these values in the preloadedQuery? For the react router history state the example is fine because params is accessible from the prepare function. That function doesn't have access to context.

[sibelius]

can you provide a code example of this?

[hegelstad]

https://github.com/relayjs/relay-examples/blob/master/issue-tracker/src/routes.js#L73

Take routes.js:73 as an example, how can you get state inside of the prepare function without storing it in react router history state?

[sibelius]

you need to consume some "global" data from it