React Native集成AWS AppSync遇GraphQL DocumentNode错误，求排查方案

我刚看了你的问题和代码，马上就发现了问题所在——你在使用compose组合Apollo高阶组件时犯了一个典型的新手错误！

错误原因 #

错误提示说传入的不是有效的GraphQL DocumentNode，核心问题是：你先把查询/突变用graphql()包装成了高阶组件（也就是listMessages和createMessage这两个变量），然后又把这些已经包装好的组件当成GraphQL文档传给了compose里的graphql()函数。而graphql()的第一个参数必须是用gql解析后的DocumentNode对象，不是组件，这就导致了报错。

修正后的代码 #

你需要把查询和突变定义为纯的DocumentNode，然后直接在compose里使用它们，而不是提前包装一次：

import { graphql, compose } from 'react-apollo';
import gql from 'graphql-tag';
// 别忘了确保Chat组件已经正确导入
import Chat from './Chat';

// 1. 先定义纯的GraphQL查询/突变文档
const LIST_MESSAGES_QUERY = gql`
 query listMessages {
 listMessages {
 id
 text
 createdAt
 sentBy {
 id
 name
 }
 }
 }
`;

const CREATE_MESSAGE_MUTATION = gql`
 mutation createMessage($text: String!, $sentById: ID!) {
 createMessage(input : {
 id : $sentById
 text : $text
 createdAt : "1/06/2018"
 updateAt:"1/06/2018"
 }){
 sentBy {
 id
 name
 }
 }
 }
`;

// 2. 在compose里直接使用这些文档，配置参数
export default compose(
  graphql(CREATE_MESSAGE_MUTATION, {
    name: 'createMessageMutation',
    options: { fetchPolicy: 'cache-and-network' }
  }),
  graphql(LIST_MESSAGES_QUERY, {
    name: 'listMessagesQuery',
    options: { fetchPolicy: 'cache-and-network' }
  })
)(Chat);

额外检查事项 #

• 确保你已经正确安装了依赖：运行npm install graphql-tag react-apollo或者yarn add graphql-tag react-apollo
• 如果使用AWS AppSync，还要确认你的Apollo客户端配置已经正确连接到AppSync端点，包括API密钥、认证方式等配置项都没有问题。

内容的提问来源于stack exchange，提问作者Bharath Kuppala