Added support for graphql-code-generator, and some other improvements

.env

@@ -1,2 +1,2 @@
-GRAPHQL=https://graphqlhub.com/graphql
+GRAPHQL=https://fakerql.com/graphql
 WS_SUBSCRIPTIONS=0

.gitignore

@@ -41,3 +41,7 @@ jspm_packages
 
 # Distribution
 dist
+
+# Generated files
+src/graphql/graphql-types.tsx
+src/graphql/graphql-modules.d.ts

package.json

@@ -19,6 +19,7 @@
     "@babel/core": "^7.1.2",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@types/compression-webpack-plugin": "^0.4.2",
+    "@types/graphql": "^14.0.3",
     "@types/history": "^4.7.2",
     "@types/html-webpack-plugin": "^3.2.0",
     "@types/kcors": "^2.2.3",
@@ -50,6 +51,11 @@
     "css-loader": "^1.0.0",
     "cssnano": "^4.1.5",
     "file-loader": "^2.0.0",
+    "graphql-code-generator": "0.14.1",
+    "graphql-codegen-typescript-graphql-files-modules": "0.14.1",
+    "graphql-codegen-typescript-react-apollo": "0.14.1",
+    "graphql-codegen-typescript-common": "0.14.1",
+    "graphql-codegen-typescript-client": "0.14.1",
     "html-webpack-plugin": "^3.2.0",
     "koa-webpack": "^5.1.0",
     "less": "^3.8.1",

src/components/example/count.tsx

@@ -6,32 +6,19 @@
 /* NPM */
 import * as React from "react";
 
-// Use the `<Mutation>` component from the React Apollo lib to set-up the
-// mutation block that will allow us to fire up GraphQL mutations. We'll also
-// grab the `<Query>` component, because we'll want to 'listen' to the current
-// count as it changes
-import { Mutation, Query } from "react-apollo";
-
 /* Local */
 
-// Get the Typescript types of our local state, so we can use them
-// with our GraphQL queries to hint at the data that should be returned
-import { IRoot } from "@/graphql/state";
-
 // Get the current count, stored in local Apollo state
-import getCount from "@/queries/getCount";
-
-// Mutation to increment the local counter
-import incrementCount from "@/mutations/incrementCount";
+import { Count, IncrementCount } from "@/graphql/graphql-types";
 
 // ----------------------------------------------------------------------------
 
 export default () => (
-  <Mutation mutation={incrementCount}>
+  <IncrementCount.Component>
     {
       doIncrementCount => {
         return (
-          <Query<IRoot> query={getCount}>
+          <Count.Component>
           {
             ({ data }) => {
 
@@ -48,9 +35,9 @@ export default () => (
               );
             }
           }
-          </Query>
+          </Count.Component>
         );
       }
     }
-  </Mutation>
+  </IncrementCount.Component>
 );

src/components/example/index.tsx

@@ -13,7 +13,7 @@ import * as React from "react";
 import Count from "./count";
 
 // Hacker News GraphQL example
-import HackerNews from "./hackernews";
+import HackerNews from "./todos";
 
 // ----------------------------------------------------------------------------
 

src/components/example/hackernews.tsx → src/components/example/todos.tsx

@@ -1,46 +1,24 @@
-// ReactQL Hacker News GraphQL example
+// Todos list data example
 
 // ----------------------------------------------------------------------------
 // IMPORTS
 
 /* NPM */
 import * as React from "react";
 
-// Use the `<Query>` component from the React Apollo lib to declaratively
-// fetch the GraphQL data, to display as part of our component
-import { Query } from "react-apollo";
-
 /* Local */
 
 // Styled component lib for generating CSS in lieu of using SASS
 import styled from "@/lib/styledComponents";
 
-// Query to get top stories from HackerNews
-import hackerNewsQuery from "@/queries/getHackerNewsTopStories";
-
-// ----------------------------------------------------------------------------
-
-// Typescript types
-
-// Represents a HackerNews story - id, title and url
-interface IHackerNewsStory {
-  id: string;
-  title: string;
-  url: string;
-}
-
-// Represents the data returned by the Hacker News GraphQL query
-interface IHackerNewsTopStories {
-  hn: {
-    topStories: IHackerNewsStory[];
-  };
-}
+// Query to get random todo items
+import { AllTodos } from "@/graphql/graphql-types";
 
 // Style the list item so it overrides the default font
-const Story = styled.li`
+const Todo = styled.li`
   font-size: 16px;
 
-  a:hover {
+  span:hover {
     /* shows an example of how we can use themes */
     color: ${props => props.theme.colors.orange};
   }
@@ -52,42 +30,42 @@ const Story = styled.li`
 // doesn't already have data from the server -- it'll display a loading message
 // while the data is being retrieved
 export default () => (
-  <Query<IHackerNewsTopStories> query={hackerNewsQuery}>
+  <AllTodos.Component>
     {
       result => {
 
         // Any errors? Say so!
         if (result.error) {
           return (
-            <h1>Error retrieving news stories! &mdash; {result.error}</h1>
+            <h1>Error retrieving todo tasks! &mdash; {result.error}</h1>
           );
         }
 
         // If the data is still loading, return with a basic
         // message to alert the user
         if (result.loading) {
           return (
-            <h1>Loading Hacker News stories...</h1>
+            <h1>Loading Todo...</h1>
           );
         }
 
         // Otherwise, we have data to work with... map over it with a
         // bullet-point list
         return (
           <>
-            <h3>Top stories from Hacker News</h3>
+            <h3>Todo</h3>
             <ul>
               {
-                result.data!.hn.topStories.map(story => (
-                  <Story key={story.id}>
-                    <a href={story.url} target="_blank">{story.title}</a>
-                  </Story>
+                result.data!.allTodos!.map(todo => (
+                  <Todo key={todo!.id}>
+                    <span>{todo!.title}</span>
+                  </Todo>
                 ))
               }
             </ul>
           </>
         );
       }
     }
-  </Query>
+  </AllTodos.Component>
 );

src/graphql/client-schema.graphql

@@ -0,0 +1,13 @@
+directive @client on FIELD
+
+type Query {
+  state: State!
+}
+
+type Mutation {
+  incrementCount: State!
+}
+
+type State {
+  count: Int!
+}

src/graphql/state.ts

@@ -11,31 +11,20 @@ import { ClientStateConfig, withClientState } from "apollo-link-state";
 /* Local */
 
 // Queries
-import getCountQuery from "@/queries/getCount";
+import { count } from "@/queries/getCount.graphql";
+import { Query, State } from "./graphql-types";
 
 // ----------------------------------------------------------------------------
 
-// Types
-
-/* STATE */
-export interface IState {
-  count: number;
-}
-
-// 'Root', which contains the 'State' key
-export interface IRoot {
-  state: IState;
-}
-
 export default function createState(cache: InMemoryCache): ApolloLink {
 
   // Helper function to retrieve the state from cache
-  function getState(query: any): IState {
-    return cache.readQuery<IRoot>({ query }).state;
+  function getState(query: any): State {
+    return cache.readQuery<Query>({ query }).state;
   }
 
   // Helper function to write data back to the cache
-  function writeState(state: IState) {
+  function writeState(state: State) {
     return cache.writeData({ data: { state } });
   }
 
@@ -48,7 +37,7 @@ export default function createState(cache: InMemoryCache): ApolloLink {
         incrementCount() {
 
           // Get the existing state
-          const state = getState(getCountQuery);
+          const state = getState(count);
 
           // Create new state. Note that we're assigning this to a new
           // constant, and not simply incrementing the existing `count`
@@ -76,7 +65,7 @@ export default function createState(cache: InMemoryCache): ApolloLink {
       __typename: "State",
       count: 0,
     },
-  } as IRoot;
+  } as Query;
 
   return withClientState(opt);
 }

src/mutations/incrementCount.graphql

@@ -0,0 +1,5 @@
+mutation IncrementCount {
+  incrementCount @client {
+    count
+  }
+}

src/queries/getCount.graphql

@@ -0,0 +1,5 @@
+query count {
+    state @client {
+      count
+    }
+  }

src/queries/getRandomData.graphql

@@ -0,0 +1,6 @@
+query allTodos {
+  allTodos {
+    id
+    title
+  }
+}

src/runner/build.ts

@@ -8,12 +8,14 @@ import * as chalk from "chalk";
 
 /* Local */
 import { build, common } from "./app";
+import { generateSchemaTypings } from "./generate";
 
 // ----------------------------------------------------------------------------
 
 common.spinner.info(chalk.default.bgBlue("Build mode"));
 
 void (async () => {
+  await generateSchemaTypings(false);
   await build();
   common.spinner.succeed("Finished building");
 })();

src/runner/development.ts

@@ -10,13 +10,16 @@ import * as KoaWebpack from "koa-webpack";
 /* Local */
 import hotServerMiddleware from "../lib/hotServerMiddleware";
 import { app, common, compiler } from "./app";
+import { generateSchemaTypings } from "./generate";
 
 // ----------------------------------------------------------------------------
 
 common.spinner
   .info(chalk.default.magenta("Development mode"))
   .info("Building development server...");
 
+generateSchemaTypings(true);
+
 app.listen({ port: common.port, host: "localhost" }, async () => {
 
   // Init Koa-Webpack dev middleware