Apollo 加载在 props 变化时总是错误的
Apollo loading is always false on props change
我是 Apollo 新手。我面临的问题是,在初始 (Mount/Render) 时进行了网络调用,而在 prop 更改时却没有。
以下是我的应用程序的简化结构。
<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 为真时,它 returns loader .
在 <Table/>
组件中,我有处理程序更新组件中的过滤器,该过滤器向下流入 <QueryComponent />
在初始渲染时,过滤器被向下传递,我可以看到已经进行了网络调用并且加载状态在一秒钟内为 true,然后变为 false。当我与 table 交互时,调用 onChange 更新过滤器并将它们传递给查询,但加载状态 return false 并且没有网络调用。
我也试过设置fetchPolicy="network-only"
和fetchPolicy="no-cache"
,还是没有网络通话。
注意:目前后端没有数据,所以初始查询return是一个空数组。
我期望的行为:当过滤器更改时再次调用查询并且应该有一个网络调用。
注2:如果我强行卸载并重新挂载 <QueryComponent>
则会发出网络请求,但我更愿意使用 Apollo 的加载状态来处理它。
react-apollo: "version": "2.5.8"
阿波罗: "version": "2.21.0"
已编辑以包含更多详细信息。
以防有人最终提出这个问题。进一步研究这个问题,我发现 react-apollo
中的 Query
忽略了此处讨论的 fetchPolicy: network-only or no-cache
长度 https://github.com/apollographql/react-apollo/issues/556 。由于遇到此问题的人和一些没有遇到此问题的人不一致,该问题已关闭。
我们解决它的方法是返回 refetch
和数据,并且在触发时它不再发送网络调用,我们调用 refetch
并强制再次发送调用。
我是 Apollo 新手。我面临的问题是,在初始 (Mount/Render) 时进行了网络调用,而在 prop 更改时却没有。
以下是我的应用程序的简化结构。
<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 为真时,它 returns loader .
在 <Table/>
组件中,我有处理程序更新组件中的过滤器,该过滤器向下流入 <QueryComponent />
在初始渲染时,过滤器被向下传递,我可以看到已经进行了网络调用并且加载状态在一秒钟内为 true,然后变为 false。当我与 table 交互时,调用 onChange 更新过滤器并将它们传递给查询,但加载状态 return false 并且没有网络调用。
我也试过设置fetchPolicy="network-only"
和fetchPolicy="no-cache"
,还是没有网络通话。
注意:目前后端没有数据,所以初始查询return是一个空数组。
我期望的行为:当过滤器更改时再次调用查询并且应该有一个网络调用。
注2:如果我强行卸载并重新挂载 <QueryComponent>
则会发出网络请求,但我更愿意使用 Apollo 的加载状态来处理它。
react-apollo: "version": "2.5.8"
阿波罗: "version": "2.21.0"
已编辑以包含更多详细信息。
以防有人最终提出这个问题。进一步研究这个问题,我发现 react-apollo
中的 Query
忽略了此处讨论的 fetchPolicy: network-only or no-cache
长度 https://github.com/apollographql/react-apollo/issues/556 。由于遇到此问题的人和一些没有遇到此问题的人不一致,该问题已关闭。
我们解决它的方法是返回 refetch
和数据,并且在触发时它不再发送网络调用,我们调用 refetch
并强制再次发送调用。