-
Notifications
You must be signed in to change notification settings - Fork 30
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
WiredComponent
should always render a Suspense
on the client
#41
Comments
This case is intentional, if we render
This is a really good point and definitely a bug that we should fix! |
Temporary workaround for RevereCRE/relay-nextjs#41
Temporary workaround for RevereCRE/relay-nextjs#41
Temporary workaround for RevereCRE/relay-nextjs#41
Temporary workaround for RevereCRE/relay-nextjs#41
Temporary workaround for RevereCRE/relay-nextjs#41
Running into this issue as well when pushing a shallow route that updates a query param used in the page level query. Verified this works for me bcgov/cas-cif@5d49688 . Given I was pushing a shallow route, I didn't expect the top level query to run. |
Thanks for verifying that fix works, I'll fix this and push out a patch later today. |
Thanks! Also, thanks @rrdelaney for maintaining this library 🙏 . It's helped us move very quickly on our project. |
It's more a workaround than a fix, and suffers from the client/server render mismatch issue you noted (i.e. it triggers a warning to be printed in the console). |
Alright, I was able to fix this in a relatively complicated manner. Just re-rendering on mount with the
Going to publish this in a new version soon. |
Alright, created |
I have encountered a situation where the page state is lost when first time navigating with a shallow router push. I suspect that this is caused by the switch of render https://github.com/RevereCRE/relay-nextjs/blob/main/src/wired/component.tsx#L113-L123 The Since when the router is changed, new instance of relay-nextjs/src/wired/component.tsx Lines 95 to 97 in 9573b7a
The new instance will make the tracking always consider as changed. relay-nextjs/src/wired/component.tsx Lines 73 to 78 in 9573b7a
The approach of rendering different component trees after detecting query variable is changed will make the page component local state to be lost for the first time switch from server render tree to client render tree for shallow page navigation. I think the library should provide an option to control the behaviour
|
@mortyccp I would recommend against navigating with a shallow router push, this library isn't designed to work with it. Is there a reason you must use shallow navigation? |
Yes, my use case need to navigate with shallow route push. |
@mortyccp this library is not designed to be used with shallow navigation. It lets Relay figure out when to fetch data or if it should be re-used from the cache. What is the problem you are trying to solve by using shallow navigation? |
I have usage of having a swiper UI for the mobile view that will update the current URL to |
@mortyccp it seems like a fairly easy workaround would be to place the local state that needs persistence in either context or a Relay client schema extension. Those features are designed with your use-case in mind: preserving local state when the component hierarchy might change. |
Not sure if I'll have time to make a small example, but I observed the following behaviour:
CSN
prop is false (meaning it won't be rendered inside aSuspense
component). Not sure if its an error from my code or if that's always the caseCSN
is back totrue
, and all is well again.usePreloadedQuery
will throw a promise at some point, but there is noSuspense
to catch it, so it causes an error and the page fails to render.I've only tested this with a development build so far, so maybe it's a different behaviour in production.
The text was updated successfully, but these errors were encountered: