github.com/humans-group/gqlgen@v0.7.2/example/chat/src/Room.js (about)

     1  import React , {Component} from 'react';
     2  import { graphql, compose } from 'react-apollo';
     3  import gql from 'graphql-tag';
     4  
     5  class Room extends Component {
     6      constructor(props) {
     7          super(props)
     8  
     9          this.state = {text: ''}
    10      }
    11  
    12      componentWillMount() {
    13          this.props.data.subscribeToMore({
    14              document: Subscription,
    15              variables: {
    16                  channel: this.props.channel,
    17              },
    18              updateQuery: (prev, {subscriptionData}) => {
    19                  if (!subscriptionData.data) {
    20                      return prev;
    21                  }
    22                  const newMessage = subscriptionData.data.messageAdded;
    23                  if (prev.room.messages.find((msg) => msg.id === newMessage.id)) {
    24                      return prev
    25                  }
    26                  return Object.assign({}, prev, {
    27                      room: Object.assign({}, prev.room, {
    28                          messages: [...prev.room.messages, newMessage],
    29                      })
    30                  });
    31              }
    32          });
    33      }
    34  
    35      render() {
    36          const data = this.props.data;
    37  
    38          if (data.loading) {
    39              return <div>loading</div>
    40          }
    41  
    42          return <div>
    43              <div>
    44                  {data.room.messages.map((msg) =>
    45                      <div key={msg.id}>{msg.createdBy}: {msg.text}</div>
    46                  )}
    47              </div>
    48              <input value={this.state.text} onChange={(e) => this.setState({text: e.target.value})}/>
    49              <button onClick={() => this.props.mutate({
    50                  variables: {
    51                      text: this.state.text,
    52                      channel: this.props.channel,
    53                      name: this.props.name,
    54                  }
    55              })} >send</button>
    56          </div>;
    57      }
    58  }
    59  
    60  const Subscription = gql`
    61      subscription MoreMessages($channel: String!) {
    62          messageAdded(roomName:$channel) {
    63              id
    64              text
    65              createdBy
    66          }
    67      }
    68  `;
    69  
    70  const Query = gql`
    71      query Room($channel: String!) {
    72          room(name: $channel) {
    73              messages { id text createdBy }
    74          }
    75      }
    76  `;
    77  
    78  const Mutation = gql`
    79      mutation sendMessage($text: String!, $channel: String!, $name: String!) {
    80          post(text:$text, roomName:$channel, username:$name) { id }
    81      }
    82  `;
    83  
    84  
    85  export default compose(graphql(Mutation), graphql(Query))(Room);