2017-02-13 88 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 s錯誤Uncaught TypeError: Cannot read property 'todolist' of undefined,但我配置了todolist,我可以在我的graphql中查詢,你可以看到查詢的結構是一樣的,我不知道爲什麼這不起作用?

回答

1

todolist應該是Query上的連接類型。另外,您的ID應該是中繼全局ID。您將無法訪問繼電器中的對象原始本地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

我不明白你的大部分代碼,你能推薦我一些資源來閱讀嗎?官方教程太難了:/ –

相關問題