将输入值传递给我的graphql突变-react / react-apollo

Question

I am using react-apollo combined with react-native-gifted-chat .

I am trying to take the input from the user and pass that to my this.props.addMessageToTeam method.

I am having difficulties passing the input value to my graphql mutation. Here is what the graphql mutation section looks like:

const addMessageToTeam = gql`
  mutation {
    createMessage(
    message: $message,
    teamId: "21345667"
  ) {
      id
      message
    }
  }
`;

Please see complete code below:

import React, { Component } from 'react';
import { View } from 'react-native';
import { GiftedChat, Bubble } from 'react-native-gifted-chat';
import styled from 'styled-components/native';
import gql from 'graphql-tag';
import { graphql, compose } from 'react-apollo';

class Chat extends Component {

  state = {
    message: '',
    messages: [],
  }

  updateText = (e) => {
    this.setState({
       message: e
    });
   }

  renderBubble (props) {
    return (
        <Bubble {...props} />
    );
  }

  sendMessage = (e) => {
    this.props.addMessageToTeam(e[0].text);
  }

  render() {

    let allMessages = this.props.data.allMessages || [];

    allMessages = allMessages.map(msg => {
      return {
        _id: msg.id,
        text: msg.message,
        createdAt: new Date(),
        user: {
          _id: 2,
          name: 'React Native',
          avatar: 'https://facebook.github.io/react/img/logo_og.png',
        }
      }
    });

    return (
      <MainContainer>
        <GiftedChat
           messages={ allMessages }
           renderBubble={this.renderBubble}
           onInputTextChanged={this.updateText}
           onSend={this.sendMessage}
          user={{ _id: 12345 }}
        />
       </MainContainer>
    );
  }
}

const MainContainer = styled.View`
    display: flex;
    flex: 1;
`

const getAllMessages = gql`
  query {
    allMessages {
      id
      message
    }
  }
`;

const addMessageToTeam = gql`
  mutation {
    createMessage(
    message: $message,
    teamId: "21345667"
  ) {
      id
      message
    }
  }
`;

export default compose(
  graphql(getAllMessages),
  graphql(addMessageToTeam, { name: 'addMessageToTeam' }),
)(Chat);

Please let me know if any further information is required.

Answer 1

In the scenario you presented, the mutation should be called with an object that follows the following structure:

sendMessage = (e) => {
  this.props.addMessageToTeam({
    variables: {
      message: e[0].text,
    }
  });
}

This is because the graphql mutation was defined with a variable called $message

You should also change the graphql declaration to:

mutation CreateMessage($message: String) {
  createMessage(message: $message, teamId: "21345667")
}