Question

当尝试通过以下方式使用onSubscription包中的@apollo/react-hooks钩子时，有时会出现竞争状况。

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时，数据 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>

Answer 1

好的，我相信我找到了答案，但是要进行验证，您可能需要仔细检查和/或发布您的查询代码。显然，阿波罗（Apollo）尝试在数据到达时对其进行嫁接，并且默认情况下，它使用id字段来进行处理。我有一个查询，该查询在我的结构的某些嵌套层中缺少这些id，并且当我将它们放入时，此错误已消失。直到遇到this error时，我才找到了指向正确方向的资源。

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

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

1 个答案: