使用ApolloConsumer将订阅响应与查询调用链接在一起

Question

我尝试在我的 React 应用通过Apollo的<Subscription>元素接收到一些事件数据之后，使用 Apollo 执行查询。我目前有代码：

        <ApolloConsumer>

          {client => {
            return (
              <Subscription subscription={SUBSCRIPTION}>

                {async ({ data, loading }) => {
                  if (data !== undefined && !isEmpty(data)) {

                    // DEBUG -> Show the subscription data
                    console.log("SUBSCRIPTION DATA");
                    console.log(data);

                    // Call the query using the subscriptions ID field
                    const { data } = await client.query({
                        query: QUERY,
                        variables: {data.event.id}
                      });
                      console.log(data);

                  }
                }}
              </Subscription>
            );
          }}
        </ApolloConsumer>

这可以编译（我正在使用打字稿），但是我收到运行时错误：

Uncaught Invariant Violation: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

对此有一些SO问题，但其背后的原因看起来更为笼统，所提供的答案无济于事。

我知道这项工作的订阅方面。但是，当我添加await client.query(...)时，会看到错误。

有人对如何解决这个问题有任何指示吗？ 有什么方法可以在订阅响应后直接执行查询？