question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useQuery sometimes doesn't start polling when skip is set to true

See original GitHub issue

Intended outcome:

In code like this:

 useQuery(QUERY_FOR_POLL, {
    variables,
    pollInterval: 10000, // 10s
    skip,
  });

Polling should start when skip is set to false.

Actual outcome:

Sometimes polling won’t start. It usually happens after starting and then stopping query.

How to reproduce the issue:

Codesandbox I added console.log to the link, so you can check if polling is working. If you click multiple times on the button, it will stop working.

Possible workaround:

I added key to the outer component which will make all hooks lose saved state, and it can work for my use case, but I think that I maybe added one edge case bug to my app.

Versions

  System:
    OS: macOS 11.1
  Binaries:
    Node: 14.13.0 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Edge: 88.0.705.63
    Safari: 14.0.2
  npmPackages:
    @apollo/client: ^3.3.0 => 3.3.1 
    apollo-upload-client: ^14.1.3 => 14.1.3 

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:6
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

4reactions
iamdiogocommented, Mar 30, 2021

@jcreighton When would it be possible to have updates on this?

Having skip end up stop working is a bit of a deal-breaker

1reaction
iamdiogocommented, Mar 23, 2021

On a first (quick) look, it seems to be related to this line:

    if (skip || query !== this.previous.query) {  // <-- this one
      this.removeQuerySubscription();
      this.removeObservable(!skip);
      this.previous.query = query;
    }

As skip is turned back to false, the query subscription and observable aren’t removed. Given that, further on this code, startQuerySubscription first checks if a subscription already exists, and returns directly if there is one, this could be the reason, as it wasn’t removed by not entering the above condition.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Queries - Apollo GraphQL Docs
This article shows how to fetch GraphQL data in React with the useQuery hook and attach the result to your UI. You'll also...
Read more >
Mutations | TanStack Query Docs
Unlike queries, mutations are typically used to create/update/delete data or perform server side-effects. For this purpose, React Query exports a ...
Read more >
Queries - Vue Apollo
If you need to wait before starting a query, you can use useLazyQuery instead of useQuery . It returns an additional load function...
Read more >
NextJS / React SSR: 21 Universal Data Fetching Patterns ...
When this hook is executed for the first time, lazy will be set to true and invalidate will be set to 0. This...
Read more >
Why You Should Use React Query or SWR - This Dot Labs
const { data: syncedData } = useQuery(id, id => getSyncedData(id), { refetchOnWindowFocus: true /* this actually doesn't need to be ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found