search

Cambridge-Community-Kitchen / cck-volunteer-web-app

https://volunteer.cckitchen.uk
3 stars 2 forks source link

explicit route page refresh when nextjs router isReady #30

Closed DoctorBracewell closed 4 months ago

DoctorBracewell commented 4 months ago

Received a report of the app getting stuck on the "Oh no! Missing one or more required query parameters." page on firefox on Android 12.

This is triggered when the router.query values are undefined, which can still happen after the component is loaded but before hydration. NextJS docs claim that:

During prerendering, the router's query object will be empty since we do not have query information to provide during this phase. After hydration, Next.js will trigger an update to your application to provide the route parameters in the query object.

and

To be able to distinguish if the query is fully updated and ready for use, you can leverage the isReady field on router.

Throttling the network confirms the bug report, but frustratingly the first quoted statement only seems to be sometimes true? Occasionally the "oh no!" message would show up and a few seconds later the app refresh itself with the route data, but occasionally it would stay on the error page without refreshing like the original report.

Regardless, I moved the query values into state and initialised them in a useEffect that depends on router.query and therouter.isReady so that they are explicitly set when the values are available, and testing afterwards confirmed 100% of the time the page refreshed. Hopefully this should fix the issue even for people with crappy connections.

vercel[bot] commented 4 months ago

@DoctorBracewell is attempting to deploy a commit to the Cambridge Community Kitchen Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] commented 4 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
cck-volunteer-web-app ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 15, 2024 5:52pm
pdl commented 4 months ago 

2:1  Error: Align from-clause from import statements  align-import/align-import
3:1  Error: Align from-clause from import statements  align-import/align-import
4:1  Error: Align from-clause from import statements  align-import/align-import
5:1  Error: Align from-clause from import statements  align-import/align-import
6:1  Error: `react` import should occur before import of `@/components/deliveries-list`  import/order```