refetch() doesn't update loading

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:
Created 4 years ago
Reactions:1
Comments:11 (2 by maintainers)

Top 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!

Top 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 ...

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 ......

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...

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...

[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...