Apollo-client: fetchMore doesn't set loading to true (beta.52)

Created on 29 May 2020  路  12Comments  路  Source: apollographql/apollo-client

Intended outcome:

When calling fetchMore, loading should be set to true.

Actual outcome:

It remains false and the data loads without this status ever changing, even though notifyOnNetworkStatusChange: true has been set on the useQuery

How to reproduce the issue:

Nothing special here:

const { loading, refetch, fetchMore, error, data } = useQuery(qry, {
    key: dataKey,
    variables,
    partialRefetch,
    notifyOnNetworkStatusChange: true,
    onCompleted: data => {
        if (data[dataKey].totalCount) {
            setTotalCount(data[dataKey].totalCount);
        }
    },
});
const loadMore = React.useCallback(
    (options = {}, loadOnTop = false) =>
        fetchMore({
            updateQuery: (previousResult, { fetchMoreResult, variables }) => {
                onUpdateQuery(loadOnTop);
                [...]
                return {
                    ...first,
                    ...last[dataKey],
                };
            },
            ...options,
        })
            .then(onLoadMore)
            .catch(onLoadMoreError),
    [onLoadMore, onLoadMoreError],
);

Versions
Apollo client beta.52
System:
OS: macOS Mojave 10.14.6
Binaries:
Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
Yarn: 1.22.4 - ~/.nvm/versions/node/v12.16.1/bin/yarn
npm: 6.14.5 - ~/.nvm/versions/node/v12.16.1/bin/npm
Browsers:
Chrome: 83.0.4103.61
Safari: 13.1.1

Most helpful comment

@benjamn FYI, I found the reason for my problem.
In our app we've been calling fetchMore like this:

      fetchMore({
        query: GQL_QUERY,
        variables: {
          ...variables,
          cursor,
        },
      });

When I removed query: GQL_QUERY, the loading state started to update correctly.
I believe the reason is the line (condition) below:
...(fetchMoreOptions.query ? fetchMoreOptions : { (src/core/ObservableQuery.ts)

Of course we were unnecessarily setting the query option, but since it worked in v2 I think it's an undescribed breaking change that is worth adding to the migration guide.

All 12 comments

I'm experiencing the same problem with Apollo client 3.0.0-rc.1. Calling refetch when using lazy query, doesn't set loading to true.

Also happening in rc.4

Happening in rc.6

I'm noting as well that https://github.com/apollographql/apollo-client/blob/master/src/__tests__/fetchMore.ts does not contain a test for loading being set to true when fetchMore is called.

Happening in rc.9

Happening in rc.10

Fix incoming: #6583

@benjamn I'm experiencing this issue using "@apollo/client": "3.0.2". Is it fixed for good?

@DanielMarkiel Are you setting notifyOnNetworkStatusChange: true?

@benjamn Yes sir. It worked perfectly before migration to v3. Downgrade to v3.0.0 didn't help.
I keep investigating what might be happening.

@benjamn FYI, I found the reason for my problem.
In our app we've been calling fetchMore like this:

      fetchMore({
        query: GQL_QUERY,
        variables: {
          ...variables,
          cursor,
        },
      });

When I removed query: GQL_QUERY, the loading state started to update correctly.
I believe the reason is the line (condition) below:
...(fetchMoreOptions.query ? fetchMoreOptions : { (src/core/ObservableQuery.ts)

Of course we were unnecessarily setting the query option, but since it worked in v2 I think it's an undescribed breaking change that is worth adding to the migration guide.

@benjamn FYI, I found the reason for my problem.
In our app we've been calling fetchMore like this:

      fetchMore({
        query: GQL_QUERY,
        variables: {
          ...variables,
          cursor,
        },
      });

When I removed query: GQL_QUERY, the loading state started to update correctly.
I believe the reason is the line (condition) below:
...(fetchMoreOptions.query ? fetchMoreOptions : { (src/core/ObservableQuery.ts)

Of course we were unnecessarily setting the query option, but since it worked in v2 I think it's an undescribed breaking change that is worth adding to the migration guide.

This! I was looking for what is wrong with my infinite loaders and you saved my day!
(BTW, I'm using @apollo/[email protected].)
And yes, setting that query is unnecessary. But I think, if we shouldn't add it and if it breaks things, it would be better that it's documented and removed from the TypeScript definitions etc. But if there are any use cases for it, it depends of course.

Apollo is a great tool and I know they put a lot of work into version 3. I hope these kind of little bugs will be fixed in near future and we will be amazed by the quality of Apollo.

Thanks!

Was this page helpful?
0 / 5 - 0 ratings