道具变更时阿波罗载入总是错误的 [英] 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>
和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.
推荐答案
以防有人最终遇到这个问题.进一步研究该问题，我发现来自react-apollo的Query忽略了此处长度为
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.
我们解决问题的方法是返回refetch数据，并在触发器上不再发送网络呼叫，我们呼叫了refetch并强制再次发送了呼叫.
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.
这篇关于道具变更时阿波罗载入总是错误的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
