Hi, friends!
I have implemented a project which pretty successfully uses Apollo/Hasura on the backend. It also uses React Router v6 for routing, as well as Auth0 for authorization. Authorization (with LinkedIn) seems to work OK, as does the routing, as well as the fetching of the data via Apollo/Hasura. 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 GraphQL.
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:
https://ddrc-store.herokuapp.com
Thanks in Advance and Best Regards,