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

Question

我正在使用react-apollo结合react-native-gifted-chat 。

我试图从用户那里获取输入并将其传递给我的this.props.addMessageToTeam方法。

我很难将输入值传递给我的graphql突变。 这是graphql突变部分的样子：

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

请在下面查看完整的代码：

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);

请让我知道是否需要任何进一步的信息。

Answer 1

在您介绍的场景中，应使用遵循以下结构的对象来调用突变：

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

这是因为graphql突变是使用名为$message的变量定义的

您还应该将graphql声明更改为：

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