Apollo加载在道具改变时总是假的[英] Apollo loading is always false on props change

问题描述

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.

推荐答案

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.