时间戳

首页 > 解决方案 > Apollo 加载在道具更改时总是错误的

reactjs - Apollo 加载在道具更改时总是错误的

问题描述

我是阿波罗的新手。我面临的问题是在初始（安装/渲染）网络调用时进行了，而在道具更改时却没有。

以下是我的应用程序的简化结构。

<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时它返回加载器。

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

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

我也尝试过设置fetchPolicy="network-only"和设置fetchPolicy="no-cache"，但仍然没有网络呼叫。

注意：目前后端没有数据，所以初始查询返回一个空数组。

我期待的行为：当过滤器更改时，再次调用查询并且应该有一个网络调用。

注意 2：如果我强制卸载并重新安装，<QueryComponent>则会发出网络请求，但我更愿意使用 Apollo 的加载状态来处理它。

反应阿波罗：“版本”：“2.5.8”

阿波罗：“版本”：“2.21.0”

编辑以包含更多细节。

标签： reactjsapolloreact-apollo

解决方案

万一有人最终提出这个问题。深入研究这个问题，我发现Queryfromreact-apollo忽略fetchPolicy: network-only or no-cache了这里详细讨论的https://github.com/apollographql/react-apollo/issues/556。由于遇到此问题的人和没有遇到此问题的人不一致，因此已关闭。

我们解决它的方法是通过返回refetch数据并且在触发器上它没有再次发送我们调用的网络调用refetch并且它再次强制发送调用。

推荐阅读