在同一组件中进行多个 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));