diff --git a/todo/data/database.js b/todo/data/database.js index ce7bec3c..4bb64638 100644 --- a/todo/data/database.js +++ b/todo/data/database.js @@ -14,19 +14,19 @@ export class Todo {} export class User {} // Mock authenticated ID -const VIEWER_ID = 'me'; +const USER_ID = 'me'; // Mock user data -const viewer = new User(); -viewer.id = VIEWER_ID; +const user = new User(); +user.id = USER_ID; const usersById = { - [VIEWER_ID]: viewer, + [USER_ID]: user, }; // Mock todo data const todosById = {}; const todoIdsByUser = { - [VIEWER_ID]: [], + [USER_ID]: [], }; let nextTodoId = 0; addTodo('Taste JavaScript', true); @@ -38,7 +38,7 @@ export function addTodo(text, complete) { todo.id = `${nextTodoId++}`; todo.text = text; todosById[todo.id] = todo; - todoIdsByUser[VIEWER_ID].push(todo.id); + todoIdsByUser[USER_ID].push(todo.id); return todo.id; } @@ -52,7 +52,7 @@ export function getTodo(id) { } export function getTodos(status = 'any') { - const todos = todoIdsByUser[VIEWER_ID].map(id => todosById[id]); + const todos = todoIdsByUser[USER_ID].map(id => todosById[id]); if (status === 'any') { return todos; } @@ -63,10 +63,6 @@ export function getUser(id) { return usersById[id]; } -export function getViewer() { - return getUser(VIEWER_ID); -} - export function markAllTodos(complete) { const changedTodos = []; getTodos().forEach(todo => { @@ -79,9 +75,9 @@ export function markAllTodos(complete) { } export function removeTodo(id) { - const todoIndex = todoIdsByUser[VIEWER_ID].indexOf(id); + const todoIndex = todoIdsByUser[USER_ID].indexOf(id); if (todoIndex !== -1) { - todoIdsByUser[VIEWER_ID].splice(todoIndex, 1); + todoIdsByUser[USER_ID].splice(todoIndex, 1); } delete todosById[id]; } diff --git a/todo/data/schema.graphql b/todo/data/schema.graphql index b5553e08..c0a51bfa 100644 --- a/todo/data/schema.graphql +++ b/todo/data/schema.graphql @@ -5,7 +5,6 @@ input AddTodoInput { type AddTodoPayload { todoEdge: TodoEdge - viewer: User clientMutationId: String } @@ -17,7 +16,6 @@ input ChangeTodoStatusInput { type ChangeTodoStatusPayload { todo: Todo - viewer: User clientMutationId: String } @@ -28,7 +26,6 @@ input MarkAllTodosInput { type MarkAllTodosPayload { changedTodos: [Todo] - viewer: User clientMutationId: String } @@ -63,7 +60,7 @@ type PageInfo { } type Query { - viewer: User + user(id: String): User # Fetches an object given its ID node( @@ -78,7 +75,6 @@ input RemoveCompletedTodosInput { type RemoveCompletedTodosPayload { deletedTodoIds: [String] - viewer: User clientMutationId: String } @@ -89,7 +85,6 @@ input RemoveTodoInput { type RemoveTodoPayload { deletedTodoId: ID - viewer: User clientMutationId: String } diff --git a/todo/data/schema.js b/todo/data/schema.js index 49f11e1c..21fe58cc 100644 --- a/todo/data/schema.js +++ b/todo/data/schema.js @@ -41,7 +41,6 @@ import { getTodo, getTodos, getUser, - getViewer, markAllTodos, removeCompletedTodos, removeTodo, @@ -123,9 +122,12 @@ const GraphQLUser = new GraphQLObjectType({ const Query = new GraphQLObjectType({ name: 'Query', fields: { - viewer: { + user: { type: GraphQLUser, - resolve: () => getViewer(), + args: { + id: { type: GraphQLString } + }, + resolve: (root, { id }) => getUser(id), }, node: nodeField, }, @@ -146,11 +148,7 @@ const GraphQLAddTodoMutation = mutationWithClientMutationId({ node: todo, }; }, - }, - viewer: { - type: GraphQLUser, - resolve: () => getViewer(), - }, + } }, mutateAndGetPayload: ({text}) => { const localTodoId = addTodo(text); @@ -168,11 +166,7 @@ const GraphQLChangeTodoStatusMutation = mutationWithClientMutationId({ todo: { type: GraphQLTodo, resolve: ({localTodoId}) => getTodo(localTodoId), - }, - viewer: { - type: GraphQLUser, - resolve: () => getViewer(), - }, + } }, mutateAndGetPayload: ({id, complete}) => { const localTodoId = fromGlobalId(id).id; @@ -190,11 +184,7 @@ const GraphQLMarkAllTodosMutation = mutationWithClientMutationId({ changedTodos: { type: new GraphQLList(GraphQLTodo), resolve: ({changedTodoLocalIds}) => changedTodoLocalIds.map(getTodo), - }, - viewer: { - type: GraphQLUser, - resolve: () => getViewer(), - }, + } }, mutateAndGetPayload: ({complete}) => { const changedTodoLocalIds = markAllTodos(complete); @@ -209,11 +199,7 @@ const GraphQLRemoveCompletedTodosMutation = mutationWithClientMutationId({ deletedTodoIds: { type: new GraphQLList(GraphQLString), resolve: ({deletedTodoIds}) => deletedTodoIds, - }, - viewer: { - type: GraphQLUser, - resolve: () => getViewer(), - }, + } }, mutateAndGetPayload: () => { const deletedTodoLocalIds = removeCompletedTodos(); @@ -231,11 +217,7 @@ const GraphQLRemoveTodoMutation = mutationWithClientMutationId({ deletedTodoId: { type: GraphQLID, resolve: ({id}) => id, - }, - viewer: { - type: GraphQLUser, - resolve: () => getViewer(), - }, + } }, mutateAndGetPayload: ({id}) => { const localTodoId = fromGlobalId(id).id; diff --git a/todo/js/app.js b/todo/js/app.js index 8e73f5de..5edac0a2 100644 --- a/todo/js/app.js +++ b/todo/js/app.js @@ -62,16 +62,18 @@ ReactDOM.render( { if (props) { - return ; + return ; } else { return
Loading
; } diff --git a/todo/js/components/Todo.js b/todo/js/components/Todo.js index fd71087f..b89e849b 100644 --- a/todo/js/components/Todo.js +++ b/todo/js/components/Todo.js @@ -32,7 +32,7 @@ class Todo extends React.Component { this.props.relay.environment, complete, this.props.todo, - this.props.viewer, + this.props.user, ); }; _handleDestroyClick = () => { @@ -60,7 +60,7 @@ class Todo extends React.Component { RemoveTodoMutation.commit( this.props.relay.environment, this.props.todo, - this.props.viewer, + this.props.user, ); } _setEditMode = (shouldEdit) => { @@ -114,8 +114,8 @@ export default createFragmentContainer(Todo, { text, } `, - viewer: graphql` - fragment Todo_viewer on User { + user: graphql` + fragment Todo_user on User { id, totalCount, completedCount, diff --git a/todo/js/components/TodoApp.js b/todo/js/components/TodoApp.js index 86ba8e3f..f9ba9e47 100644 --- a/todo/js/components/TodoApp.js +++ b/todo/js/components/TodoApp.js @@ -26,11 +26,11 @@ class TodoApp extends React.Component { AddTodoMutation.commit( this.props.relay.environment, text, - this.props.viewer, + this.props.user, ); }; render() { - const hasTodos = this.props.viewer.totalCount > 0; + const hasTodos = this.props.user.totalCount > 0; return (
@@ -45,11 +45,11 @@ class TodoApp extends React.Component { placeholder="What needs to be done?" /> - + {hasTodos && }
@@ -72,12 +72,12 @@ class TodoApp extends React.Component { } export default createFragmentContainer(TodoApp, { - viewer: graphql` - fragment TodoApp_viewer on User { + user: graphql` + fragment TodoApp_user on User { id, totalCount, - ...TodoListFooter_viewer, - ...TodoList_viewer, + ...TodoListFooter_user, + ...TodoList_user, } `, }); diff --git a/todo/js/components/TodoList.js b/todo/js/components/TodoList.js index a02376c2..9139ce84 100644 --- a/todo/js/components/TodoList.js +++ b/todo/js/components/TodoList.js @@ -25,22 +25,22 @@ class TodoList extends React.Component { MarkAllTodosMutation.commit( this.props.relay.environment, complete, - this.props.viewer.todos, - this.props.viewer, + this.props.user.todos, + this.props.user, ); }; renderTodos() { - return this.props.viewer.todos.edges.map(edge => + return this.props.user.todos.edges.map(edge => ); } render() { - const numTodos = this.props.viewer.totalCount; - const numCompletedTodos = this.props.viewer.completedCount; + const numTodos = this.props.user.totalCount; + const numCompletedTodos = this.props.user.completedCount; return (
{ RemoveCompletedTodosMutation.commit( this.props.relay.environment, - this.props.viewer.completedTodos, - this.props.viewer, + this.props.user.completedTodos, + this.props.user, ); }; render() { - const numCompletedTodos = this.props.viewer.completedCount; - const numRemainingTodos = this.props.viewer.totalCount - numCompletedTodos; + const numCompletedTodos = this.props.user.completedCount; + const numRemainingTodos = this.props.user.totalCount - numCompletedTodos; return (