加载卡在 @apollo/react-hooks 中的"useSubscription"方法

Question

当尝试通过以下方式使用@apollo/react-hooks包onSubscription钩子时，我有时会遇到竞争条件。

let { data, loading, error } = useSubscription(MY_SUBSCRIPTION)
if (loading) return 'Loading...';
if (error) return 'Error...';
...

当我加载页面时，大多数时候data会被完美填充，最终加载会变成false，但每~5次尝试就会有某种竞争条件，loading永远保持true，data是undefined。

GraphQL 查询：

export const EXERCISE_SUBSCRIPTION = gql`
subscription {
exercises {
id
title
tasks {
id
title
start_time
end_time
}
}
}
`;

软件包版本是(当前(最新的：@apollo/react-hooks": "^3.1.0-beta.0"，但我也尝试过以前的版本。

有没有人经历过类似的事情并知道如何解决它？ 如果您遇到此问题，我发现了一个解决方法。您可以看到，当我添加回调选项onSubscriptionData时，数据存在于其中，但不知何故最终不会出现在外部的data对象中。

// <HACK>
// sometimes data object is empty, but onSubscriptionData is filled.
// in that case use data from onSubscriptionData method.
const [dataFromCb, setDataFromCb ] = useState(null)
let { data, loading } = useSubscription(INJECT_SUBSCRIPTION, {
onSubscriptionData: (res) => {
setDataFromCb(res.subscriptionData.data)
},
});
if (loading && !dataFromCb) return 'Loading...';
data = (data === undefined) ? dataFromCb : data;
// </HACK>

Answer 1

好的，我相信我找到了这个问题的答案，但要验证，您可能需要仔细检查和/或发布您的查询代码。显然，阿波罗正试图在数据到达时将其结合起来，默认情况下它使用id字段来执行此操作。我有一个查询，在我的结构的某些嵌套层中缺少这些id，当我将它们放入时，此错误已经消失。直到我遇到这个错误，我才找到为我指明正确方向的资源。

供参考：https://github.com/apollographql/react-apollo/issues/1003

Answer 2

我在加载卡住时遇到了同样的问题useSubscription。后来注意到我把这个钩子保留在子组件中，所以把它与触发服务器上订阅的useQuery移到同一级别(父组件(。所以就我而言，是 React 渲染问题影响了这种行为。