Question

我已经构建了一个连接到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的指南都将非常有帮助。谢谢。

Answer 1

我不认为 onSubscriptionData 曾经直接暴露给查询。根据他们的文档，其<Subscription>道具

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

您应该以这种方式使用订阅，以便在onSubscriptionData回调中获取数据。

我建议您检查git demo，以获得更好的主意。

为React Apollo订阅客户端配置onSubscriptionData

1 个答案: