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

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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 17
Comments: 15 (3 by maintainers)

Commits related to this issue

Simulate loading result for original query before fetchMore. Should fix #6354, #6542, #6534, and #6459. Reliable delivery of loading results is one of the core benefits that Apollo Client strives to... — committed to apollographql/apollo-client by benjamn 4 years ago
Simulate loading result for original query before fetchMore. Should fix #6354, #6542, #6534, and #6459. Reliable delivery of loading results is one of the core benefits that Apollo Client strives to... — committed to apollographql/apollo-client by benjamn 4 years ago
Simulate loading result for original query before fetchMore. (#6583) Should fix #6354, #6542, #6534, and #6459. Reliable delivery of loading results is one of the core benefits that Apollo Client... — committed to apollographql/apollo-client by benjamn 4 years ago

Most upvoted comments

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

+12

DanielMarkiel on Jul 28, 2020

Happening in rc.10

hatchli on Jun 30, 2020

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.

SeyedAlirezaFatemi on Jun 5, 2020

Fix incoming: #6583

benjamn on Jul 13, 2020

Happening in rc.6

damien-monni on Jun 19, 2020

Also happening in rc.4

tpict on Jun 12, 2020

I think maybe the issue is that fetchmore doesn’t know how to merge the new result. this is my query response

comments: {
      pageInfo: {.....},
      comments: [{....}]
}

now when we fetch more data, the fetchmore doesn’t know how to merge the new data with the old one.

TheEhsanSarshar on Oct 28, 2021

@DanielMarkiel Are you setting notifyOnNetworkStatusChange: true?

benjamn on Jul 24, 2020