Experimenting with codegen for local queries [WIP]

examples/todo/.gitignore

@@ -19,3 +19,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# codegen
+__generated__

examples/todo/src/components/Footer.js

@@ -5,7 +5,7 @@ import gql from 'graphql-tag';
 import Link from './Link';
 
 const GET_VISIBILITY_FILTER = gql`
-  {
+  query GetVisibilityFilter {
     visibilityFilter @client
   }
 `;

examples/todo/src/components/TodoList.js

@@ -5,7 +5,7 @@ import gql from 'graphql-tag';
 import Todo from './Todo';
 
 const GET_TODOS = gql`
-  {
+  query GetTodos {
     todos @client {
       id
       completed

examples/todo/src/index.js

@@ -7,27 +7,10 @@ import { ApolloProvider } from 'react-apollo';
 
 import App from './components/App';
 import { resolvers, defaults } from './resolvers';
+import typeDefs from './schema';
 
 const cache = new InMemoryCache();
 
-const typeDefs = `
-  type Todo {
-    id: Int!
-    text: String!
-    completed: Boolean!
-  }
-
-  type Mutation {
-    addTodo(text: String!): Todo
-    toggleTodo(id: Int!): Todo
-  }
-
-  type Query {
-    visibilityFilter: String
-    todos: [Todo]
-  }
-`;
-
 const client = new ApolloClient({
   cache,
   link: withClientState({ resolvers, defaults, cache, typeDefs }),

examples/todo/src/resolvers.js

@@ -11,7 +11,7 @@ export const resolvers = {
   Mutation: {
     addTodo: (_, { text }, { cache }) => {
       const query = gql`
-        query GetTodos {
+        query Todos {
           todos @client {
             id
             text
@@ -24,7 +24,7 @@ export const resolvers = {
         id: nextTodoId++,
         text,
         completed: false,
-        __typename: 'TodoItem',
+        __typename: 'Todo',
       };
       const data = {
         todos: previous.todos.concat([newTodo]),
@@ -33,16 +33,16 @@ export const resolvers = {
       return newTodo;
     },
     toggleTodo: (_, variables, { cache }) => {
-      const id = `TodoItem:${variables.id}`;
+      const id = `Todo:${variables.id}`;
       const fragment = gql`
-        fragment completeTodo on TodoItem {
+        fragment completeTodo on Todo {
           completed
         }
       `;
       const todo = cache.readFragment({ fragment, id });
       const data = { ...todo, completed: !todo.completed };
       cache.writeData({ id, data });
-      return null;
+      return true;
     },
   },
 };

examples/todo/src/schema.js

@@ -0,0 +1,21 @@
+import gql from 'graphql-tag';
+
+const typeDefs = gql`
+  type Todo {
+    id: Int!
+    text: String!
+    completed: Boolean!
+  }
+
+  type Mutation {
+    addTodo(text: String!): Todo
+    toggleTodo(id: Int!): Boolean
+  }
+
+  type Query {
+    visibilityFilter: String
+    todos: [Todo]
+  }
+`;
+
+export default typeDefs;

package.json

@@ -8,8 +8,7 @@
     "test": "lerna run -- test",
     "prelint": "npm run lint-fix",
     "lint": "lerna run -- lint",
-    "lint-fix":
-      "prettier --trailing-comma all --single-quote --write \"packages/*/{src,tests,test,benchmark}/**/*.{j,t}s*\"",
+    "lint-fix": "prettier --trailing-comma all --single-quote --write \"packages/*/{src,tests,test,benchmark}/**/*.{j,t}s*\"",
     "lint-staged": "lint-staged",
     "filesize": "lerna run -- filesize && bundlesize",
     "type-check": "lerna run -- type-check",
@@ -47,7 +46,10 @@
       "prettier --trailing-comma all --single-quote --write",
       "git add"
     ],
-    "*.json*": ["prettier --write", "git add"]
+    "*.json*": [
+      "prettier --write",
+      "git add"
+    ]
   },
   "pre-commit": "lint-staged",
   "dependencies": {},