Получить данные подписки в одном компоненте, используя graphql? - PullRequest
Новая
       16

Получить данные подписки в одном компоненте, используя graphql?

1 голос
/ 01 ноября 2019

Я использую подписки graphql для обновления моего интерфейса. В настоящее время мне нужны 2 компонента для обновления данных, так как я не уверен в другом способе доступа к subscribeToMore в блоке componentDidMount. Можно ли сделать все это в одном компоненте?

Мой код выглядит так:

App.js 

const App = () => (
  <Query query={GET_MESSAGES}>
    {({ data, loading, subscribeToMore }) => {
      if (!data) {
        return null;
      }

      if (loading) {
        return <span>Loading ...</span>;
      }

      return (
        <Messages
          messages={data.messages}
          subscribeToMore={subscribeToMore}
        />
      );
    }}
  </Query>
);

Messages.js 

class Messages extends React.Component {
  componentDidMount() {
    this.props.subscribeToMore({
      document: MESSAGE_CREATED,
      updateQuery: (prev, { subscriptionData }) => {
        if (!subscriptionData.data) return prev;

        return {
          messages: [
            ...prev.messages,
            subscriptionData.data.messageCreated,
          ],
        };
      },
    });
  }

  render() {
    return (
      <ul>
        {this.props.messages.map(message => (
          <li key={message.id}>{message.content}</li>
        ))}
      </ul>
    );
  }
}
...