Remove viewer type pattern

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];
 }

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
 }
 

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;

todo/js/app.js

@@ -62,16 +62,18 @@ ReactDOM.render(
   <QueryRenderer
     environment={modernEnvironment}
     query={graphql`
-      query appQuery {
-        viewer {
-          ...TodoApp_viewer
+      query appQuery($userId: String) {
+        user(id: $userId) {
+          ...TodoApp_user
         }
       }
     `}
-    variables={{}}
+    variables={{
+      userId: "me"
+    }}
     render={({error, props}) => {
       if (props) {
-        return <TodoApp viewer={props.viewer} />;
+        return <TodoApp user={props.user} />;
       } else {
         return <div>Loading</div>;
       }

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,

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 (
       <div>
         <section className="todoapp">
@@ -45,11 +45,11 @@ class TodoApp extends React.Component {
               placeholder="What needs to be done?"
             />
           </header>
-          <TodoList viewer={this.props.viewer} />
+          <TodoList user={this.props.user} />
           {hasTodos &&
             <TodoListFooter
-              todos={this.props.viewer.todos}
-              viewer={this.props.viewer}
+              todos={this.props.user.todos}
+              user={this.props.user}
             />
           }
         </section>
@@ -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,
     }
   `,
 });

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 =>
       <Todo
         key={edge.node.id}
         todo={edge.node}
-        viewer={this.props.viewer}
+        user={this.props.user}
       />
     );
   }
   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 (
       <section className="main">
         <input
@@ -61,8 +61,8 @@ class TodoList extends React.Component {
 }
 
 export default createFragmentContainer(TodoList, {
-  viewer: graphql`
-    fragment TodoList_viewer on User {
+  user: graphql`
+    fragment TodoList_user on User {
       todos(
         first: 2147483647  # max GraphQLInt
       ) @connection(key: "TodoList_todos") {
@@ -77,7 +77,7 @@ export default createFragmentContainer(TodoList, {
       id,
       totalCount,
       completedCount,
-      ...Todo_viewer,
+      ...Todo_user,
     }
   `,
 });

todo/js/components/TodoListFooter.js

@@ -22,13 +22,13 @@ class TodoListFooter extends React.Component {
   _handleRemoveCompletedTodosClick = () => {
     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 (
       <footer className="footer">
         <span className="todo-count">
@@ -49,7 +49,7 @@ class TodoListFooter extends React.Component {
 export default createFragmentContainer(
   TodoListFooter,
   graphql`
-    fragment TodoListFooter_viewer on User {
+    fragment TodoListFooter_user on User {
       id,
       completedCount,
       completedTodos: todos(

todo/js/mutations/AddTodoMutation.js

@@ -28,10 +28,6 @@ const mutation = graphql`
           text
         }
       }
-      viewer {
-        id
-        totalCount
-      }
     }
   }
 `;