@apollo/react-hooks 中的 `useSubscription` 方法加载卡住

Posted 2023-03-10

【中文标题】@apollo/react-hooks 中的 `useSubscription` 方法加载卡住

【英文标题】：Loading stuck for `useSubscription` method in @apollo/react-hooks

【发布时间】：2020-01-15 06:38:56

【问题描述】：

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

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

...

当我加载页面时，大部分时间data 被完美填充，最终加载将变为false，但每~5 次尝试都会出现某种竞争条件，其中loading 永远保持true 和@ 987654328@ 是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"，不过之前的版本我也试过了。

有没有人经历过类似的事情并知道如何解决？ 如果您遇到此问题，我发现了一个解决方法 hack。您可以看到，当我添加回调选项onSubscriptionData 时，数据IS 存在其中，但不知何故并未出现在外部的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>

【参考方案1】：

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

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

【讨论】：

我包含了我的 GraphQL 查询。由于我对两种返回类型都有 id（我的 Hasura 模式中的主键），因此这可能与您提到的问题不同。

@MadisPukkonen 是的，我又开始看到这个问题了。看来这仍然是一个悬而未决的问题。

有人解决这个问题吗？

【参考方案2】：

useSubscription 加载卡住时遇到了同样的问题。后来注意到我将此钩子保留在子组件中，因此将其移动到与触发服务器订阅的useQuery 相同的级别（父组件）。所以在我的情况下，影响这种行为的是 React 渲染问题。