I was following RescriptRelay docs but ended up in a situation when I used Query.use on a component that is mounted after the initial render (for example when I push a new route and render a new component with a Query.use) whole page breaks and throws an error:
Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.
I managed to fix it by wrapping an action that leads to rendering a new component with useTransition’s startTransition method (for example by wrapping all RescriptReactRouter.push calls), but it seems a little odd.
Is that supposed to work that way?
Query.use always suspend unless all data is already there, because it’s a lazy query - it initiates the data fetching on mount.
In Relay, using preloaded queries is best practice. Preloaded queries mean that the query itself is initiated somewhere else, before trying to render the component. This is typically in a route handler, click handler or similar. As close to the action that needs the query as possible.
I’ve built a dedicated router for RescriptRelay that makes it very simple to implement all of these best practices without sacrificing on DX or needing a lot of boilerplate: rescript-relay-router/packages/rescript-relay-router/README.md at main · zth/rescript-relay-router · GitHub. Using that will make it easy to use preloaded queries, do code splitting and fetch data+code in parallell, and so on. Recommended unless you’re already using a fw that does routing for you, I use it in almost all projects where I use RescriptRelay.