Multiple request when using react <Suspense> #3519
Replies: 1 comment
-
|
Hi! I managed to reproduce the issue. I updated the example with another branch called exampletwo Somehow it seems that if a variable would be undefined to the query with the setup described in the thread start (doing a mutation with suspense and lazy loading components) will cause the issue somehow. You can try this by commenting out the mutation in App.tsx at row 14. I tried to add pause to the queries if the query variable is undefined but it has no effect. Weird. I'm not sure. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Hi everyone!
We are facing a very specific issue and we have been trying to trace it down for several days now and we are out of ideas. The issue is that urql is doing several network requests even though the resolver has already been executed.
We have at least found out that it's connected to using react
<Suspense>and urql is doing a mutation before the lazy components have finished loading. If we don't do the mutation, the issue goes away. It doens't happen to all queries. It seems to only happen to nested queries.eg:
We have also noticed that having variables that changes the pause flag triggers the issue as well.
To further address this issue we have created a simple application and we are able to --> partly <-- reproduce the issue. The partly part means that in our reproduction the issue goes away when adding
suspense: trueto the urql configuration. In our real application it doesn't and we currently can't understand why.The simple application can be cloned from here https://github.com/danielkaxis/urqlsuspensetest
Run
yarnand thenyarn serveand esbuild opens the application at localhost:8000The application entry point is
Main.tsxIt then has a
LoadingApp.tsxcomponent that will render a<User />component if no user has been set.When the user is set, we load
<App />. Inside app we are using<Suspense>and lazy loads components. We are also calling the function calledpreparethat executes an urql mutation.We have added a simple query, nested queries, a mutation and an optimistic response.
Can be found in:
__mocked_generated__folder. There is aconsole.countfor each query.These are later used in the application and to mimic re-renders we have added timeouts that will update the state.
The queries are used in the lazy loaded components. They can be found in
mock_componentsfolder.Our question is further, how can we continue to debug this issue?
Any help is appreciated.
Thanks in advance!
(The package versions we are using can be seen in package.json in our repro-project)
Beta Was this translation helpful? Give feedback.
All reactions