fetchMore networkStatus and notifyOnNetworkChange not working in 3.3.7

[robertsmit]

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

[jcreighton]

@robertsmit Could you provide a runnable reproduction using either this repo or this CodeSandbox?

[sflahave]

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

[ramiAbdou]

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.

[chyamuna]

Any update on this. We are also facing the same issue.

[eyalw]

+1

[alex20465]

+1

Its always the same ===7

[drewlustro]

I don't believe this issue needs reproduction. The scenario described is pretty common, no?

[alaminut]

I'm having the same problem and came across this issue while searching and can't believe it's still open so I'll add my situation to the list too.

Code is simplified for a better reading experience

Given the query:

const query = gql`
  query fetchSomeData($skip: Int!, $take: Int!) {
    items(skip: $skip, first: $take) {
      id
      title
    }
}`

In my component:

const Component = () => {
  const skip = useRef(0);
  const {data, loading, fetchMore} = useQuery(query, {
    notifyOnNetworkStatusChange: true // having this does not make any difference
    variables: {
      skip: skip.current,
      take: 10
    }
  })

  return (
    <div>
      {loading && <Spinner />}
      {data.items.map(item => <ItemRenderer item={item} />)}
      <button onClick={() => fetchMore({ variables: { skip: skip.current + 10 } })}>Load more</button>
    </div>
  )
}

Clicking the button triggers the network request, and data gets updated but loading never changes. I have a very basic, naive array merge policy in the cache configuration like the one below:

typePolicies: {
  Query: {
          fields: {
            items: {
              keyArgs: false,
              merge(existing = [], incoming) {
                return [...existing, ...incoming];
              },
            },
          },
        }
}

If I remove the field policy then I need to provide a similar merge policy in the updateQuery parameter of fetchMore but regardless the loading field from the useQuery result never gets updated.

[dhmcloud]

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

[bhavikagrawal]

This should solve the issue.

[miladdotnetdeveloper]

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"

[bhavikagrawal]

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 ?

[SimplySayHi]

I'm having the same issue. Setting notifyOnNetworkStatusChange to true doesn't solve it. After ajax call ends, the values of loading and networkStatus are always set to true and 3 ( fetchMore ) respectively.

[miladdotnetdeveloper]

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.

[bhavikagrawal]

I'm having the same issue. Setting notifyOnNetworkStatusChange to true doesn't solve it. After ajax call ends, the values of loading and networkStatus are always set to true and 3 ( fetchMore ) respectively.

loading will always result to true for fetchmore, therefor you need to use networkStatus to toggle your loading state.

[fridaystreet]

This should solve the issue.

Awesome thanks, this worked for us, we were passing the query property to fecthMore. removed it and voila!