Debounce shouldn't apply to the first request of a query

[stevelacey]

Describe the bug The debounce delay should apply only to variable updates/refetches rather than the initial query load – the scenario it's creating for me is that when then passing items and loading into; say, a data table component, you typically end up with a flash of "no items" screen, because loading == false for duration of the initial debounce, and items is probably defaulted to an empty array.

The same can't be said for alternative implementations like apollo-link-debounce, the throttling there is as expected, it applies to subsequent requests only, the first request is immediate.

To Reproduce Steps to reproduce the behavior:

1. Set the debounce option on a smart query
2. Reload the page
3. Observe that the first request doesn't happen until after the duration of the debounce

Expected behavior Debounce shouldn't apply to the first request.

Versions vue: 2.6.10 vue-apollo: 3.0.3 apollo-client: 2.6.4

Additional context I didn't have much luck setting debounce myself after the initial request, I suspect this doesn't work:

this.$apollo.queries.users.setOptions({ debounce: 250 })

[cerinoligutom]

Similar to the issue I raised at #982

Did you have any workaround for the meantime?

[sstern6]

Thanks for pointing this out.

Just opened https://github.com/vuejs/vue-apollo/issues/1134. If this gets into the package then youll be able to conditionally return which value you want to set as the debounce. Either 0 or n ms

[karladler]

I guess what you are looking for is a "leading: true" option analogue to the debounce function in lodash. https://lodash.com/docs/4.17.15#debounce

[Akryum]

Or you can use apollo-link-debounce directly :wink:

[d3x7r0]

Just found a related issue to this one:

if you debounce a query, and then SSR it, the query is debounced on the client but not on the server.

This should be fine, however this also leads to a hydration mismatch because the query data is populated on the server, but not until after the component is mounted on the client.

[tpuida]

I faced the same problem.