为 React Apollo 订阅客户端配置 onSubscriptionData答案

【问题标题】：Configuring onSubscriptionData for React Apollo subscription client为 React Apollo 订阅客户端配置 onSubscriptionData
【发布时间】：2019-02-02 14:56:17
【问题描述】：

我已经构建了一个连接到 Graphql 服务器的 React 应用程序。它工作得很好。客户端被配置为接收实时订阅。都好。

现在我想将我的 React 组件配置为使用 react-appollo 的 onSubscriptionData 功能，以便在组件接收到订阅数据后进行额外处理。

我找到了我认为可以让我实现这一目标的文档：https://www.apollographql.com/docs/react/api/react-apollo.html#subscription

但是，我不确定如何实现它。这是我尝试过的：

class LabSession extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    this.props.subscribeToUpdatedLabSession();
  }

  render() {
    const { lab } = this.props;

    return (
      <div>
        {lab && <div className="lab-detail">

        </div>}
      </div>
    )
  }

}

const LabSessionWithData = graphql(
  getLabSession,
  {
    options: props => ({
      variables: { id: props.lsid },
      fetchPolicy: 'cache-and-network',
    }),
    props: props => ({
      lab: props.data.getLabSession ? props.data.getLabSession : [],
      subscribeToUpdatedLabSession: params => {
        props.data.subscribeToMore({
          document: updatedLabSessionSubscription,
          variables: { LabSessionID: props.ownProps.LabSessionID },
          updateQuery: (prev, { subscriptionData: { data: { onUpdateLabSession }, variables } }) => {
            return {
              ...prev,
              getLabSession: onUpdateLabSession
            }
          }
        })
      },
      onSubscriptionData: () => {
        console.log('hi dudes')
      }
    })
  },
)(LabSession);

export default LabSessionWithData;

任何关于如何正确使用onSubscriptionData 的指导都会非常有帮助。谢谢。

【问题讨论】：

你为什么不直接使用 subscribeToMore 我认为你根本不需要 onsubscriptiondata。

标签： reactjs react-apollo

【解决方案1】：

我不认为 onSubscriptionData 曾经直接暴露于查询。根据他们的文件，它的<Subscription> prop

<Subscription
  subscription={subscription}
  onSubscriptionData={opts => {
    console.log("ApolloClient", opts.client);
    console.log("subscriptionData", opts.subscriptionData);
  }}
/>

在onSubscriptionData回调中你应该通过这种方式使用订阅来获取数据。

我建议您查看git demo，您可能会有更好的想法。

【讨论】：