在同一组件中进行多个 GraphQL 订阅时,需要注意订阅 id 不同,而且每个订阅都需要创建单独的 subscription,并在 componentWillUnmount 中取消订阅。
代码示例:
import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
const subscription1 = gql`
  subscription newMessages($id: ID!) {
    newMessage(id: $id) {
      content
    }
  }
`;
const subscription2 = gql`
  subscription newNotifications($id: ID!) {
    newNotification(id: $id) {
      content
    }
  }
`;
class MyComponent extends Component {
  componentDidMount() {
    this.subscription1 = this.props.subscribeToNewMessages({ variables: { id: this.props.id } });
    this.subscription2 = this.props.subscribeToNewNotifications({ variables: { id: this.props.id } });
  }
  componentWillUnmount() {
    this.subscription1();
    this.subscription2();
  }
  render() {
    // ...
  }
}
export default graphql(subscription1, {
  name: 'subscribeToNewMessages',
  props: ({ subscribeToMore }) => ({
    subscribeToNewMessages: params =>
      subscribeToMore({
        document: subscription1,
        variables: params.variables,
      }),
  }),
})(graphql(subscription2, {
  name: 'subscribeToNewNotifications',
  props: ({ subscribeToMore }) => ({
    subscribeToNewNotifications: params =>
      subscribeToMore({
        document: subscription2,
        variables: params.variables,
      }),
  }),
})(MyComponent));