Debounce broken in useQuery

[karladler]

Describe the bug
Setting the debounce option in useQuery seems to have no affect and a query is executed for each variable change

To Reproduce
Steps to reproduce the behaviour:

1. create any query with composition API using useQuery ...
2. set debounce option to some seconds e.g. { debounce: 15000 }
3. load page. GQL query is executed instantly, but should be executed after 15 seconds
4. change any variable in query
5. GQL query is again executed instantly, but should be executed after 15 seconds

Expected behaviour
GQL query is always executed instantly, but should be executed after 15 seconds

Versions
vue: 2.6.14
vue-apollo: 3.0.8
@apollo/client: 3.4.16
@vue/apollo-composable: 4.0.0-alpha.15
@vue/apollo-util: 4.0.0-alpha.15

Additional context
Also using graphql codegen, but I checked the generated code and an simple example without codegen too, which should suffice.

example

const { result } = useQuery(getEntitiesDoc, () => ({ uuid: uuidRef.value?.uuid }), { fetchPolicy: 'cache-and-network', debounce: 15000 });

codegen versions:
"@graphql-codegen/add": "^3.1.0",
"@graphql-codegen/cli": "^2.2.1",
"@graphql-codegen/named-operations-object": "^2.1.0",
"@graphql-codegen/typescript-operations": "^2.1.8",
"@graphql-codegen/typescript-vue-apollo": "^3.1.6"

[STARSCrazy]

@karladler @Akryum
I have the same problem and have dug through it with the debugger. I found two ways to fix the problem. I have edited locally directly in my index.esm.js. For a proper fix, of course, useQuery.ts would have to be modified.

Variant 1 is certainly not in the sense of the inventors. Just comment out the isRestartDebounceSetup check.

function restart () {
    //if (!isRestartDebounceSetup) updateRestartFn()
    debouncedRestart()
  }

More correct seems an extension at the "watch" near the comment "Applying variables".

if (serialized !== currentVariablesSerialized) {
	if (currentOptions.value && ( currentOptions.value.throttle || currentOptions.value.debounce)) {
		updateRestartFn()
	}
	currentVariables = value
	restart()
}

I think the check can be improved or the updateRestartFn logic.

[ferm10n]

Here's more info on why this bug happens:

• In order for debouncing to happen, debouncedRestart needs to be set to debounce(currentOptions.value.debounce, baseRestart) and not just baseRestart
  - debouncedRestart will be correctly assigned in updateRestartFn() IF currentOptions is set
• the first time updateRestartFn is called is by the watch on documentRef. At this point, currentOptions has not been set.
  • isRestartDebounceSetup is set to true as well
• currentOptions is set in the watch on optionsRef, which is executed immediately, but after the documentRef watch.
  • in the watch cb, updateRestartFn is only called if currentOptions is already set (it has not yet at this point)
  • next, currentOptions is assigned and restart() is called
• the call to restart() also could call updateRestartFn() if isRestartDebounceSetup was false, but this was already set when the documentRef watch cb was fired earlier

This effectively means that options will only be applied on change, and not when initially calling useQuery()