loop-payments / react-router-relay

Relay entry point integration for react-router
https://www.npmjs.com/package/@loop-payments/react-router-relay
23 stars 3 forks source link

Issue with Entrypoint loaders and navigation state #7

Open process0 opened 11 months ago

process0 commented 11 months ago

There is an issue with the current implementation and how react router handles navigation state. Navigation state can be obtained using the useNavigation hook. Using the current implementation, the state will always be idle, and not loading or submitting.

My guess is this happens because the generated loader returns immediately and the state will never have a chance to change. I encountered this issue before I found this package. I solved this by having my loader at the time return a Promise like so:

  return new Promise((resolve) => {
      fetchQuery(environment, query, variables)
      .subscribe({
          complete: () => {
              const resp = loadQuery(environment, query, {where})
              resolve(resp)
          },
 ...
      });

This is a recommended pattern if you need to avoid suspense but it works here to "manually keep track of a loading state".

I'm not sure what the best solution here is. The above works fine for single queries, but its unclear what should be done when multiple queries exist. React router has defer which may be useful here.