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.

refetch() doesn't update loading

See original GitHub issue

Intended outcome:

I am using refetch from useQuery hook in order to retry if something fails or timeout (remote graphql taking too long).

Actual outcome:

refetch triggers the new request but didn’t update the loading state variable. If I put the option notifyOnNetworkStatusChange to true, it will update the loading state variable.

Is it the correct behavior? if yes, why?

How to reproduce the issue:

import React from 'react';
import { useQuery } from '@apollo/react-hooks';

const MyDummyComponent = () => {
    const { loading, error, refetch, data } = useQuery(/* ... */);
    if (loading) return (<Loading />);
    if (error && !data) return (<LoadingError onRetry={refetch} />);
    return null;
}

Versions

  System:
    OS: Linux 5.0 KDE neon 5.17
  Binaries:
    Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
    Yarn: 1.21.0 - ~/.nvm/versions/node/v12.13.1/bin/yarn
    npm: 6.12.1 - ~/.nvm/versions/node/v12.13.1/bin/npm
  Browsers:
    Chrome: 78.0.3904.70
    Firefox: 70.0

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:11 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
StefanYohanssoncommented, Jan 2, 2020

For now, creating a file to wrap those apollo/react-hooks functions and inject that option is the way to go for me (only find/replace imports across the project). But I really want to understand if it is the expected behavior and why

import {
	useQuery as runQuery,
	useLazyQuery as runLazyQuery,
} from '@apollo/react-hooks';

export * from '@apollo/react-hooks';

export const useQuery = (query, options = {}) => {
	const patchedOptions = {
		notifyOnNetworkStatusChange: true,
		...options,
	};
	return runQuery.apply(null, [query, patchedOptions]);
}

export const useLazyQuery = (query, options = {}) => {
	const patchedOptions = {
		notifyOnNetworkStatusChange: true,
		...options,
	};
	return runLazyQuery.apply(null, [query, patchedOptions]);
};
1reaction
hwillsoncommented, Apr 29, 2021

This should no longer be an issue in @apollo/client@latest - let us know otherwise, thanks!

Read more comments on GitHub >

github_iconTop Results From Across the Web

refetch() does not update loading to true · Issue #321 - GitHub
When I call props.data.refetch() , props.data.loading is still false . image. Expected Behavior. I thought it ...
Read more >
refetching a query with react-apollo: why is `loading` not true?
I'm trying Apollo and using the following relevant code: const withQuery = graphql(gql` query ApolloQuery { apolloQuery { data } } `); export ......
Read more >
Refetching queries in Apollo Client - Apollo GraphQL Docs
Refetching queries in Apollo Client. Apollo Client allows you to make local modifications to your GraphQL data by updating the cache, but sometimes...
Read more >
Fixing a Concurrency Bug by Awaiting Refetch Queries
We've done a good job with our Delete Habit feature, but we have a bug. It turns out that Apollo resolves the loading...
Read more >
[Solved]-apollo graphql UI is not updating after refetch-Reactjs
I encountered a problem where the data from the useQuery hook was not updating after calling the refetch function. In my case, the...
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