apollo-client: fetchMore networkStatus and notifyOnNetworkChange not working in 3.3.7

In the latest version (3.3.7) the networkStatus for fetchingMore is not working:

export declare enum NetworkStatus {
    loading = 1,
    setVariables = 2,
    fetchMore = 3,
    refetch = 4,
    poll = 6,
    ready = 7,
    error = 8
}

But when calling fetchMore, the networkStatus is never changed to 3 when notifyOnNetworkChange = true…

About this issue

Original URL
State: open
Created 3 years ago
Reactions: 15
Comments: 15 (1 by maintainers)

Most upvoted comments

I’m seeing the same issue. I’m using local-only fields in my query and when my local-only fields change, it refetches from the network, but does not update the loading and networkStatus variables.

ramiAbdou on Apr 27, 2021

This should solve the issue.

Unfortunately it didn’t solve the problem for me. I don’t set the query and have the same problem. My code is like below:
const handleLoadMoreClick = () => {
    //setLoadMoreLoading(true);
    const endCursor = data?.liveData?.pageInfo.endCursor;
    fetchMore({
      variables: { after: endCursor },
      updateQuery: (previousQueryResult, { fetchMoreResult }) => {
        if (!fetchMoreResult.liveData) return previousQueryResult;
        fetchMoreResult.liveData.edges = [
          ...(previousQueryResult.liveData?.edges?.map((x) => x) ?? []),
          ...(fetchMoreResult.liveData.edges ?? []),
        ];
        //setLoadMoreLoading(false);
        return fetchMoreResult;
      },
    });
  };
The commented lines are a workaround for setting loading state for a button. I use “@apollo/client”: “^3.6.6”
Did you use notifyOnNetworkStatusChange: true ?

Thank you for reply, I set the option notifyOnNetworkStatusChange: true in useQuery and it seems networkStatus != NetworkStatus.ready is reliable now.

miladdotnetdeveloper on Feb 22, 2023

Also, just wanted to add that I am seeing the same behaviour as mentioned by @alaminut

dhmcloud on Feb 13, 2023

I’m seeing the same … I’m expecting that if a call to fetchMore triggers a network call, then either loading or networkStatus should be updated so I can let the user know that data is loading.

I have a query setup like this:

const { loading, error, data, fetchMore, networkStatus } = useQuery(ALL_JOBS, {
    variables: {
      filter,
      first: rowsPerPage,
      sortBy,
      sortDir,
    },
    notifyOnNetworkStatusChange: true,
    context: {
      debounceKey: "ALL_JOBS",
      debounceTimeout: 50,
    },
  })

Then I have a sort function that gets called when a user wants to change the sorting:

function sort(propertyName) {
    const newSortBy = propertyName
    const newSortDir = propertyName !== sortBy ? "ASC" : sortDir === "ASC" ? "DESC" : "ASC"
    setSortBy(newSortBy)
    setSortDir(newSortDir)
    setPage(0)
    fetchMore({
      variables: {
        filter,
        first: rowsPerPage,
        sortBy: newSortBy,
        sortDir: newSortDir,
      },
    })
  }

I can see that this triggers a network call, but the loading always remains false and networkStatus always stays at 7.

This query is configured to use the relayStylePagination from @apollo/client/utilities, btw

sflahave on Feb 14, 2021