Apollo loading is always false on props change

Question

I am new to Apollo. Issue i am facing is that On initial (Mount/Render) network call is made and on prop change it isn't.

Following is simplified structure of my application.

<Component (has filters in state)>
  <QueryComponent filters = {...filters} (passed to query)>

    <Table onChange/>

  </QueryComponent>
<Component/>

QueryComponent Code

export const QueryComponent = ({ callback, filter }) => {

  // Data transformation from filter to vars(expected by Query)

  return (
    <Query
      handleLoading
      query={query}
      returnPartialData
      variables={vars}
      fetchPolicy="network-only"
      callback={callback}
      getData={function}
      entityType="xx"
    />
  );
};

Query returns ApolloQuery

<ApolloQuery
    returnPartialData={returnPartialData}
    partialRefetch={partialRefetch}
    {...rest}
  >
    {
      ({
        data,
        loading,
      }) => {
        if (loading) {
          return handleLoading
            ? (
              <Loading />
            )
            : callback({
              loading,
            });
        }

        const queryData = data && getData(data);
        const hasValidData = !!queryData && !!Object
          .values(queryData)
          .filter((val) => !!val)
          .length;

        if (!hasValidData) {
          return passThruMissingData
            ? callback({
              loading,
              ...queryData,
            })
            : (
              <EntityNotFound
                type={entityType}
              />
            );
        }

        let strippedData = { ...queryData };
        const isValueAnArray = Object.values(strippedData)[0] instanceof Array;

        if (isValueAnArray) {
          strippedData = transform(
            strippedData,
            (result, value, key) => {
              value.forEach(deepStripInvalid);

              // eslint-disable-next-line no-param-reassign
              result[key] = value;
            },
          );
        } else {
          deepStripInvalid(strippedData);
        }

        return callback({
          ...strippedData,
        });
      }
    }
  </ApolloQuery>

and QueryComponent has a Wrapper that has Query as ApolloQuery form react-apollo and it returns loader when loading is true.

In <Table/> component I have handler that updates the filters in Component which flows down into <QueryComponent />

On initial render Filters are passed down and i can see that network call has been made and loading state was true for a second and then change to false. When I interact with table onChange is called which updates the filters and they are passed to Query, but loading state return false and there is no network call.

I have tried to set fetchPolicy="network-only" and to fetchPolicy="no-cache" as well and there is still no network call.

Note: Currently there is no data on backend so initial query returns an empty array.

Behaviour I am expecting: When filters are changed query is called again and there should be a network call.

Note2: If I forcefully unmount and remount the <QueryComponent> then network request is made, but i would prefer to use Apollo's loading state to handle that.

react-apollo: "version": "2.5.8"

apollo: "version": "2.21.0"

Edited to include more details.

Mind sharing the QueryComponent code? It seems it is likely only making fetches in componentDidMount versus also doing so in componentDidUpdate, so OFC remounting it fetches data. — Drew Reese
Thanks @DrewReese for the response. I don't think that should be a problem as I am using this same Query and ApolloQuery in another page where data is actually returned from the query and it behaves properly i.e loading is true and then false. Also i was logging the loading above if(loading) in ApolloQuery. It means that on each change i am reaching there but somehow ApolloQuery is not making a network call. I have edited and updated the question. — noumanniazi

noumanniazi noumanniazi · Accepted Answer · 2020-01-16T10:51:36

In case someone ends up coming to this question. Digging further into the problem I found that Query from react-apollo was ignoring fetchPolicy: network-only or no-cache discussed here in length https://github.com/apollographql/react-apollo/issues/556 . This was closed due to inconsistency of people having this issue and some who didn't.

The way we solved it is by returning refetch with the data and on the trigger it wasn't sending a network call again we called refetch and it forcefully send the call again.

Apollo loading is always false on props change

1 Answers