refetching a query with react-apollo: why is `loading` not true?

Question

I'm trying Apollo and using the following relevant code:

const withQuery = graphql(gql`
query ApolloQuery {
  apolloQuery {
    data
  }
}
`);

export default withQuery(props => {
  const {
    data: { refetch, loading, apolloQuery },
  } = props;

  return (
        <p>
          <Button
            variant="contained"
            color="primary"
            onClick={async () => { await refetch(); }}
          >
            Refresh
          </Button>
          {loading ? 'Loading...' : apolloQuery.data}
        </p>
  );
});

The server delays for 500ms before sending a response with { data: `Hello ${new Date()}` } as the payload. When I'm clicking the button, I expect to see Loading..., but instead the component still says Hello [date] and rerenders half a second later.

According to this, the networkStatus should be 4 (refetch), and thus loading should be true. Is my expectation wrong? Or is something regarding caching going on that is not mentioned in the React Apollo docs?

The project template I'm using uses SSR, so the initial query happens on the server; only refetching happens in the browser - just if that could make a difference.

Andrea Puddu · Accepted Answer · 2020-02-26 16:08:40Z

37

I think that you need to specify notifyOnNetworkStatusChange: true in the query options (it's false by default).

edited Feb 26, 2020 at 16:08

answered Mar 27, 2019 at 8:54

Andrea Puddu

7888 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bryan Lumbantobing Over a year ago

where to set this option?

Arnas Dičkus Over a year ago

@BryanLumbantobing you set this option here: const { data, loading, refetch } = useQuery< InterfaceQuery >( UsersQuery({ activeUser }), { notifyOnNetworkStatusChange: true } );

S.. Over a year ago

Also if skip is true then even though refetch will be run explicitly, loading will remain false.

Collectives™ on Stack Overflow

refetching a query with react-apollo: why is `loading` not true?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related