urql-graphql
React 19 Cannot update a component (`Component`) while rendering a different component
Describe the bug
Since react 19, there is an error showing up when trying to mount a component that runs a query that was already executed by another component.
I found this error while updating a website to next15. It has a page that calls a follow button that queries the followage status. The error shows up when navigating to a different page that imports the same button component.
I prepared two examples, one using nextjs, which is closer to my use case, and another one using npx create-react-router@latest.
What I found out is that the error only happens when using network-only, and when the two query invocation has the same query name. (There's an extra page on next's example that test it). On nextjs, it happens regardless using network-only or not
create-react-router example: https://github.com/JoaoBGusmao/urql-r19-bug
nextjs example: https://github.com/JoaoBGusmao/urql-next15-bug
Both projects, just install the dependencies and run yarn dev
Reproduction
https://github.com/JoaoBGusmao/urql-r19-bug
Urql version
urql 4.2.2
Validations
- [x] I can confirm that this is a bug report, and not a feature request, RFC, question, or discussion, for which GitHub Discussions should be used
- [x] Read the docs.
- [x] Follow our Code of Conduct
Sorry, dropped the ball here. I haven't been able to test this myself in a real app basically. If someone is willing to test this out then I'm happy to merge this of course.
However, I've delayed #3769 originally because I think the check is superfluous. It was originally kept for some kind of pre-React 18 edge case. I don't remember. But I think it's safe to now always do Promise.resolve(value).then(setState). I just haven't tested this in development yet (where the difference occurs)
Actually, this may also work and get rid of React internals as well. It's closer to what we used to do here, but that had different gotchas. But this preserves the synchronous nature of setState and allows for consistent batched state updates (as it was before) when possible https://github.com/urql-graphql/urql/commit/9dbe48cd352d0a72a5555e92f4f027bde29628ee
@kitten oh I thought the PR was just to hide the console errors? I've tested heavily and despite getting the errors, everything is working as expected. Is it worth just merging in that PR until you have time to work on the full solution you mentioned?
Whenever either I get a free minute to test this manually, or when someone here can vouch for https://github.com/urql-graphql/urql/commit/9dbe48cd352d0a72a5555e92f4f027bde29628ee working in a prod build reliably (with concurrent queries) instead, since that commit basically bypasses this issue entirely
I've added a PR with a failing test to hopefully verify the fix in #3769.
See https://github.com/urql-graphql/urql/pull/3769#issuecomment-3228118780
