Clicking 'Back' or 'Forward' in the browser leads to a blank screen?

Hi, friends!

I have implemented a project which pretty successfully uses Auth0 for authentication. It also uses React Router v6 for routing, as well as Hasura/ Postgres for the backend. Authorization (with LinkedIn) seems to work OK, as does the routing, as well as the fetching of the data via Hasura/ GraphQL. The issue is when a user uses the BACK or FORWARD button on the browser to or from a page that has a useQuery hook or useMutation hook, the page, more often than not, will return blank, even though the route changes to the correct address. My understanding is this might have to do with React Router’s location.action object (pop versus push, etc.), but in reading the React Router v6 docs, this issue should no longer exist? (Hence why they seem to have gotten rid of useHistory and now only have useNavigation…?)

I’m not sure how to get around this issue, or if it is even related to Auth0. Note that Auth0 does try to authenticate via token on every page, and that not all of the routes that experience this issue are protected routes.

I have tried implementing a few solutions. One solution was to cache the data using Hasura’s cache, but the data is only cached on Hasura’s cloud side, and so pinging the server is still required and thus the back/forward ghost issue still exists. I tried, but can’t get Apollo’s graphQL InMemory Cache to work. I am currently trying to install Chrome Service Workers to perhaps see if I can cache the pages and then run them from the cache in case a network request fails, but I am having trouble just installing the service worker from an already existing React app. Lastly, I have looked into React Router but again it looks like with V6; this issue shouldn’t be occurring since their routing algorithm now takes care of it… but that doesn’t seem to be the case?

Has anyone encountered this error and/or been able to fix it?

For reference, my app is deployed here:

Thanks in Advance and Sincerest Regards,