Multiple request when using react <Suspense>

[danielkaxis]

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:

Query
  cars
Cars
  car
  model
  retail

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: true to 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 yarn and then yarn serve and esbuild opens the application at localhost:8000

The application entry point is
Main.tsx

It then has a LoadingApp.tsx component 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 called prepare that 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 a console.count for 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_components folder.

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)

[danielkaxis]

Hi! I managed to reproduce the issue. I updated the example with another branch called exampletwo
https://github.com/danielkaxis/urqlsuspensetest/tree/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 will double check in our real application if it's actually the issue.

I tried to add pause to the queries if the query variable is undefined but it has no effect. Weird.

const [{ data: carColors, fetching: fetchingCarColors }] = useQuery({
  query: CarColorsDocument,
  variables: {
	id: carId,
  },
  pause: carId === undefined
})

Query
  vehicles
Vehicles
  car
  cars
  bicycle
  bicycles

I'm not sure.