addComment.js

import gql from 'graphql-tag';
import { commonResponse } from 'app/gql/fragments';

export default gql`
  mutation AddCommentMutation($commentData: AddCommentInput!){
    addComment(addCommentData: $commentData){
      ...ResponseFrag
  }
}
  ${commonResponse}
`;

commentForm.js

import React from 'react';
import PropTypes from 'prop-types';
import { View, TextInput, TouchableOpacity, Image } from 'react-native';
import { graphql } from 'react-apollo';
import CommentMutation from 'app/App/gql/schemas/Comments/addComment';
import CommentsQuery from 'app/App/gql/schemas/Comments/comments';
import getDefaultOptions from 'app/gql/getDefaultOptions';
import styles from './assets/styles';

class CommentForm extends React.Component {
  state = {
    value: ''
  }

  onChangeText = text => {
    this.setState({
      value: text
    });
  }

  handleCommentMutation = () => {
    const { submitComment } = this.props;
    const { value } = this.state;
    if(value) submitComment({
      value
    }).then(() => this.setState({ value: '' }));
  }

  render() {
    const { value } = this.state;
    return (
      <View style={styles.searchContainer}>
        <View
          style={[styles.boxContainer,styles.inputBoxContainer]}>
          <TextInput
            style={styles.textBox}
            onChangeText={this.onChangeText}
            onSubmitEditing={this.handleCommentMutation}
            value={value}
            placeholder="Comment"
            placeholderTextColor="#9da0b8"
            autoFocus
          />
          <TouchableOpacity style={styles.cancelView} activeOpacity={1}>
            <Image source={happyIcon} resizeMode='contain' />
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const withMutations = graphql(CommentMutation, {
  options: () => ({
    ...getDefaultOptions('collaboration')
  }),
  props: ({ ownProps, mutate }) => {
    return {
    submitComment: ({ value }) =>
      mutate({
        variables: {
          commentData: {
            comment: value
          }
        },
        optimisticResponse: {
          __typename: 'Mutation',
          addComment: {
            __typename: 'CommonResponse',
            _id       : -1,
            id        : null,
            comment   : value,
            meta      : ownProps.data[0].meta,
            owner     : ownProps.data[0].owner,
            status    : 'success',
            message   : 'Comment successfully added.',
            action    : 'AddComment',
          },
        },
//         optimisticResponse: {
//           __typename: 'Mutation',
//           addComment: {
//             __typename: 'CommonResponse',
//             id        : -1,
//             status    : 'success',
//             message   : 'Comment successfully added.',
//             action    : 'AddComment',
//           },
//         },
        update: (store, { data }) => {
          const data2 = store.readQuery({ query: CommentsQuery });
          data2.comments.unshift(data.addComment);
          store.writeQuery({ query: CommentsQuery, data: data2 });
        },
      }),
    };
  },
});

CommentForm.propTypes = {
  handleCommentMutation: PropTypes.func,
  onChangeText         : PropTypes.func,
  value                : PropTypes.string,
};

export default withMutations(CommentForm);

comments.js

import gql from 'graphql-tag';
import { meta } from 'app/gql/fragments';
import { owner } from 'app/App/gql/fragments';

export default gql`
  query CommentsQuery{
    comments{
      _id
      comment
      owner {
        ...OwnerFrag
      }
      meta {
        ...MetaFrag
      }
    }
  }
  ${owner}
  ${meta}
`;

commonResponse.js

import gql from 'graphql-tag';

export default gql `
  fragment ResponseFrag on CommonResponse {
    id
    status
    message
    action
  }
`;

meta.js

import gql from 'graphql-tag';

export default gql `
	fragment MetaFrag on MetaInfo {
		_version
		_created
		_owner {
			first_name
			last_name
		}
		_created_by {
			first_name
			last_name
		}
		_modified_by {
			first_name
			last_name
		}
		_last_modified
		_member
		_entity
		_module
	}
`;

owner.js

import gql from 'graphql-tag';

export default gql `
	fragment OwnerFrag on MiniUser {
		_id
		first_name
		last_name
		userpic
	}
`;

schema.js

comments(param: RequestParamInput): [Comment!]!

type Comment implements Identifiable, MetaInfoAware {
  # Comment to be commented
  comment: String
  # reference of the comment
  reference: Reference
  # access type of the comment
  access: AccessInfo
  # owner of the comment
  owner: MiniUser
  # MetaInfo of the related record or data
  _id: String
  # Unique Identifier
  meta: MetaInfo
}

// mutation query
addComment(addCommentData: AddCommentInput!): CommonResponse!
// only those fields are returned from the server when the mutation is successful
type CommonResponse {
  # Identifier
  id: String
  # Status result of the process
  status: String
  # Message of the process
  message: String
  # Action specifier of the process
  action: String
}