道具变更时阿波罗载入总是错误的

本文介绍了道具变更时阿波罗载入总是错误的的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是阿波罗的新手.我面临的问题是，在初始(挂接/渲染)网络调用时发生了，而在更改道具时却没有.

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>

和QueryComponent的包装器的格式为Query as ApolloQuery react-apollo，并且在 loading 为true时返回loader.

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

在<Table/>组件中，我有处理程序来更新Component中的过滤器，该过滤器向下流入<QueryComponent />

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

在初始渲染中，过滤器被向下传递，我可以看到已经进行了网络调用，并且加载状态持续一秒钟为true，然后更改为false.当我与表进行交互时，将调用onChange来更新过滤器，并将它们传递给Query，但是加载状态返回false，并且没有网络调用.

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.

我也尝试将fetchPolicy="network-only"设置为fetchPolicy="no-cache"，并且仍然没有网络通话.

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.

注2:如果我强行卸载并重新安装<QueryComponent>，则会发出网络请求，但我希望使用Apollo的加载状态来处理该问题.

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.

反应阿波罗:版本":"2.5.8"

react-apollo: "version": "2.5.8"

阿波罗:版本":"2.21.0"

apollo: "version": "2.21.0"

经过编辑以包含更多详细信息.

Edited to include more details.

道具变更时阿波罗载入总是错误的

问题描述

推荐答案