2017-02-13 2 views
0

私は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}) 
       } 
      } 
     } 
    } 
}); 

このコードは単純に見え、これは動作しませんなぜ私が見ることができないと私はTHIを持っていますエラーUncaught TypeError: Cannot read property 'todolist' of undefined、私はtodolistを構成し、私は自分のgraphqlでクエリを実行することができます、あなたはクエリの構造が同じであることがわかります、なぜこれが動作しているのかわかりません?

答えて

1

todolistは、接続タイプがQueryである必要があります。また、あなたのIDはRelayグローバル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な呼び出しでそれを愛するようになります。

+0

私はあなたのコードの大半を理解していません、私にいくつかのリソースを読むことをお勧めできますか?公式チュートリアルはとても難しいです:/ –

関連する問題