React-Apollo结合react-native-gifted-chat：输入值传GraphQL Mutation遇阻

我来帮你梳理下解决这个问题的关键步骤和常见排查点，应该能帮你顺利把用户输入传递到mutation里：

1. 正确捕获Gifted Chat的用户输入 #

Gifted Chat的onSend回调会返回一个消息数组，我们可以直接从中提取用户输入的文本内容，然后调用你的addMessageToTeam方法。示例代码如下：

import { GiftedChat } from 'react-native-gifted-chat';

class ChatScreen extends React.Component {
  // 处理消息发送事件
  onSend = (messages = []) => {
    // 提取用户输入的第一条消息文本
    const userInput = messages[0].text;
    
    // 调用mutation方法，传入所需变量
    this.props.addMessageToTeam({
      variables: {
        teamId: "你的团队ID", // 替换成实际的团队ID，比如从props或state获取
        content: userInput    // 把用户输入的文本传进去
      }
    })
    .then(res => {
      // 发送成功后的逻辑，比如更新聊天列表
      console.log("消息发送成功", res);
    })
    .catch(err => {
      console.error("发送失败", err);
    });
  };

  render() {
    return (
      <GiftedChat
        messages={this.props.chatMessages} // 聊天记录数据
        onSend={messages => this.onSend(messages)}
        user={{
          _id: 1, // 当前用户的ID，根据实际情况替换
        }}
      />
    );
  }
}

2. 确认GraphQL Mutation的定义和Apollo包装正确 #

要确保你的mutation定义和react-apollo的高阶组件配置没有问题，这样addMessageToTeam才能正确注入到组件props中：

import { graphql } from 'react-apollo';
import gql from 'graphql-tag';

// 定义AddMessageToTeam的mutation
const ADD_MESSAGE_TO_TEAM = gql`
  mutation AddMessageToTeam($teamId: ID!, $content: String!) {
    addMessageToTeam(teamId: $teamId, content: $content) {
      id
      content
      createdAt
      user {
        id
        name
      }
    }
  }
`;

// 用graphql高阶组件包装组件，将mutation方法注入props
export default graphql(ADD_MESSAGE_TO_TEAM, { name: 'addMessageToTeam' })(ChatScreen);

3. 常见问题排查 #

• 变量名不匹配：检查mutation定义中的变量名（比如$teamId、$content）和你传入variables对象里的键是否完全一致，拼写错误是最常见的问题。
• 异步逻辑处理：mutation调用是异步操作，一定要用.then()和.catch()处理成功和失败的情况，避免因为异步导致的状态更新异常。
• 权限验证：如果你的mutation需要用户身份信息，确认Apollo Client已经配置了正确的请求头（比如token），否则可能会因为权限不足调用失败。
• 缓存更新：发送成功后，记得更新Gifted Chat的消息列表，比如在.then()里用GiftedChat.append方法把新消息添加到现有列表中，让界面实时更新。

内容的提问来源于stack exchange，提问作者peter flanagan