我的查詢中繼失敗，我不知道為什么？

Question

我有一個簡單的查詢，在我的Graphql中可以正常工作，但是我無法使用中繼將數據傳遞給組件，而且我不知道為什么:(

{
  todolist { // todolist returns array of objects of todo
    id
    text
    done
  }
}

這是我的代碼，試圖使用中繼傳遞組件中的數據：

class TodoList extends React.Component {
  render() {
    return <ul>
      {this.props.todos.todolist.map((todo) => {
        <Todo todo={todo} />
      })}
    </ul>;
  }
}
export default Relay.createContainer(TodoList, {
  fragments: {
    todos: () => Relay.QL`
      fragment on Query {
        todolist {
          id
          text
          done
        } 
      }
    `,
  },
});

最后是我的模式

const Todo = new GraphQLObjectType({
    name: 'Todo',
    description: 'This contains list of todos which belong to its\' (Persons)users',
    fields: () => {
        return {
            id: {
                type: GraphQLInt,
                resolve: (todo) => {
                    return todo.id;
                }
            },
            text: {
                type: GraphQLString,
                resolve: (todo) => {
                    return todo.text;
                }
            },
            done: {
                type: GraphQLBoolean,
                resolve: (todo) => {
                    return todo.done;
                }
            },
        }
    }
});

const Query = new GraphQLObjectType({
    name: 'Query',
    description: 'This is the root query',
    fields: () => {
        return {
            todolist: {
                type: new GraphQLList(Todo),
                resolve: (root, args) => {
                    return Conn.models.todo.findAll({ where: args})
                }
            }
        }
    }
});

這段代碼看起來很簡單，我看不到為什么它不起作用，並且出現此錯誤Uncaught TypeError: Cannot read property 'todolist' of undefined ，但是我配置了todolist並可以在我的graphql中查詢，您可以看到查詢是相同的，我不知道為什么這不起作用？

Answer 1

todolist應該是Query上的連接類型。 另外，您的ID應該是中繼全局ID。 您將無法在Relay中訪問對象的原始本機id字段。

import {
  connectionArgs,
  connectionDefinitions,
  globalIdField,
} from 'graphql-relay';

// I'm renaming Todo to TodoType
const TodoType = new GraphQLObjectType({
  ...,
  fields: {
    id: uidGlobalIdField('Todo'),
    ...
  },
});

const {
  connectionType: TodoConnection,
} = connectionDefinitions({ name: 'Todo', nodeType: TodoType });

// Also renaming Query to QueryType
const QueryType = new GraphQLObjectType({
  ...,
  fields: {
    id: globalIdField('Query', $queryId), // hard-code queryId if you only have one Query concept (Facebook thinks of this top level field as being a user, so the $queryId would be the user id in their world)
    todos: { // Better than todoList; generally if it's plural in Relay it's assumed to be a connection or list
      type: TodoConnection,
      args: connectionArgs,
    },
  },
});

// Now, to be able to query off of QueryType
const viewerDefaultField = {
  query: { // Normally this is called `viewer`, but `query` is ok (I think)
    query: QueryType,
    resolve: () => ({}),
    description: 'The entry point into the graph',
  }
};

export { viewerDefaultField };

以上內容尚未完全完成（您可能還需要在一個或多個類型上設置節點接口，這將需要節點定義），但是它應該回答您的基本問題並入門。

這是一個巨大的學習難題，但是一旦您努力學習，它就會變得有意義，並且您將開始通過RESTful調用愛上它。