How to use the react-apollo/index.graphql function in react-apollo

// @TODO: Error on previousValues property
                    if (subscriptionData.data.Note.mutation === 'DELETED') {
                        this.props.data.refetch();
                    }
                    return prev;
                }
            })
        };

        return (
            
        )
    }
}

export default graphql(NotesService.queries.allNotes, {
    options: () => ({
        variables: {
            orderBy: 'createdAt_DESC',
            filter: {
                user: {
                    id: UserService.getUser().userId
                }
            }
        },
    })
})(NotesContainer);

// By returning `cursor` here, we update the `fetchMore` function
              // to the new cursor.
              messages: {
                totalCount,
                edges: dataDelivery === 'add' ? [...edges, ...previousResult.messages.edges] : edges,
                pageInfo,
                __typename: 'Messages'
              }
            };
          }
        });
      };
      return { error: error ? error.graphQLErrors[0].message : null, loading, messages, updateQuery, loadData };
    }
  }),
  graphql(ADD_MESSAGE, {
    props: ({ mutate }) => ({
      addMessage: async ({ text, userId, username, uuid, quotedId, attachment, quotedMessage }) => {
        try {
          await mutate({
            variables: { input: { text, uuid, quotedId, attachment } },
            optimisticResponse: {
              __typename: 'Mutation',
              addMessage: {
                __typename: 'Message',
                createdAt: new Date().toISOString(),
                text,
                username,
                userId,
                uuid,
                id: null,
                quotedId,

)
    }
}

export default graphql(NotesService.mutations.updateNote)(NoteEditor);

path: attachment ? attachment.uri : null
              }
            },
            update: (cache, { data: { addMessage } }) => {
              const prevMessages = getMsgsFromCache(cache);
              const { messages } = onAddMessage(prevMessages, addMessage);
              writeMsgsToCache(cache, messages);
            }
          });
        } catch (e) {
          return { error: e.graphQLErrors[0].message };
        }
      }
    })
  }),
  graphql(DELETE_MESSAGE, {
    props: ({ mutate }) => ({
      deleteMessage: async id => {
        try {
          await mutate({
            variables: { id },
            optimisticResponse: {
              __typename: 'Mutation',
              deleteMessage: {
                id,
                __typename: 'Message'
              }
            },
            update: (cache, { data: { deleteMessage } }) => {
              const prevMessages = getMsgsFromCache(cache);
              const { messages } = onDeleteMessage(prevMessages, deleteMessage);
              writeMsgsToCache(cache, messages);

this.changeColor('blue')} className='color-selector blue'/>
                     this.changeColor('dark-blue')} className='color-selector dark-blue'/>
                
                <div style="{{textAlign:">
                     this.changeColor('purple')} className='color-selector purple'/&gt;
                     this.changeColor('pink')} className='color-selector pink'/&gt;
                     this.changeColor('brown')} className='color-selector brown'/&gt;
                     this.changeColor('gray')} className='color-selector gray'/&gt;
                </div>
            
        );
    }

}

export default graphql(NotesService.mutations.updateNote)(NoteColor)

type="submit"
                                />
                            
                        
                    
                
            
        );

        return (
            this.state.collapsed ? collapsed : expanded
        )
    }
}

export default graphql(NotesService.mutations.createNote)(NoteCreate);

__typename: 'Message'
              }
            },
            update: (cache, { data: { deleteMessage } }) => {
              const prevMessages = getMsgsFromCache(cache);
              const { messages } = onDeleteMessage(prevMessages, deleteMessage);
              writeMsgsToCache(cache, messages);
            }
          });
        } catch (e) {
          return { error: e.graphQLErrors[0].message };
        }
      }
    })
  }),
  graphql(EDIT_MESSAGE, {
    props: ({ mutate }) => ({
      editMessage: async ({ text, id, createdAt, userId, username, uuid, quotedId, quotedMessage }) => {
        try {
          await mutate({
            variables: { input: { text, id } },
            optimisticResponse: {
              __typename: 'Mutation',
              editMessage: {
                id,
                text,
                userId,
                username,
                createdAt: createdAt.toISOString(),
                uuid,
                quotedId,
                quotedMessage: {

return onDeleteMessage(prev, node.id);
        case 'UPDATED':
          return onEditMessage(prev, node);
        default:
          return prev;
      }
    });
  };

  render() {
    return ;
  }
}

export default compose(
  graphql(MESSAGES_QUERY, {
    options: () => {
      return {
        fetchPolicy: 'network-only',
        variables: { limit, after: 0 }
      };
    },
    props: ({ data }) => {
      const { loading, error, messages, fetchMore, updateQuery } = data;
      const loadData = (after, dataDelivery) => {
        return fetchMore({
          variables: {
            after: after
          },
          updateQuery: (
            previousResult,
            {