Настройка onSubscriptionData для клиента подписки React Apollo - PullRequest
Новая
       10

Настройка onSubscriptionData для клиента подписки React Apollo

0 голосов
/ 28 августа 2018

Я создал приложение React, которое подключено к серверу Graphql. Работает отлично. Клиент настроен на получение подписок в режиме реального времени. Все хорошо.

Теперь я хочу настроить свой компонент React на использование функции onSubscriptionData response-appollo, чтобы выполнять дополнительную обработку после получения компонентом данных подписки.

Я нашел эту документацию, которая, я думаю, позволит мне достичь этого: 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 было бы очень полезно. Спасибо.

1 Ответ

0 голосов
/ 19 октября 2018

я не думаю onSubscriptionData когда-либо подвергались непосредственно запросу. Согласно их документу, его <Subscription> проп 

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

вы должны использовать подписку таким образом, чтобы получать данные в обратном вызове onSubscriptionData.

Я бы посоветовал проверить git demo , у вас может быть идея получше.

...