Add dev server

example/src/home.tsx → example/src/app/home.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Connect, query, mutation } from '../../src/index';
+import { Connect, query, mutation } from '../../../src/index';
 import TodoList from './todo-list';
 import TodoForm from './todo-form';
 import Loading from './loading';

example/src/index.tsx → example/src/app/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { Provider, Client } from '../../src/index';
+import { Provider, Client } from '../../../src/index';
 import Home from './home';
 
 const client = new Client({

example/src/server/index.js

@@ -0,0 +1,27 @@
+const graphqlHttp = require("express-graphql");
+const express = require("express");
+const app = express();
+const cors = require('cors');
+
+app.use(cors())
+
+const { schema, context } = require("./schema");
+
+const PORT = 3001;
+
+const initializedGraphQLMiddleware = graphqlHttp({
+  // GraphQL’s data schema
+  schema: schema,
+  // Pretty Print the JSON response
+  pretty: true,
+  // Enable GraphiQL dev tool
+  graphiql: true,
+  // A function that returns extra data available to every resolver
+  constex: context
+});
+
+app.use(initializedGraphQLMiddleware);
+
+app.listen(PORT, () => {
+  console.log(`Server running at http://localhost:${PORT}`);
+});

example/src/server/schema.js

@@ -0,0 +1,103 @@
+const fetch = require("isomorphic-fetch");
+const { makeExecutableSchema } = require("graphql-tools");
+const uuid = require("uuid/v4");
+
+const store = {
+  todos: [
+    {
+      id: uuid(),
+      text: "test"
+    },
+    {
+      id: uuid(),
+      text: "test2"
+    },
+    {
+      id: uuid(),
+      text: "test3"
+    }
+  ],
+  user: {
+    name: "Ken",
+    age: 32
+  }
+};
+
+const typeDefs = `
+  type Query {
+    todos: [Todo]
+    todo(id: ID!): Todo
+    user: User
+  }
+  type Mutation {
+    addTodo(text: String!): Todo
+    removeTodo(id: ID!): Todo
+    editTodo(id: ID!, text: String!): Todo
+  }
+  type Todo {
+    id: ID,
+    text: String,
+  }
+  type User {
+    name: String
+    age: Int
+  }
+`;
+
+const resolvers = {
+  Query: {
+    todos: (root, args, context) => {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve(store.todos);
+        }, 500);
+      });
+    },
+    todo: (root, args, context) => {
+      return store.todos.find(a => (a.id = args.id));
+    },
+    user: (root, args, context) => {
+      return store.user;
+    }
+  },
+  Mutation: {
+    addTodo: (root, args, context) => {
+      const id = uuid();
+      const { text } = args;
+      store.todos.push({ id, text });
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve({ id, text });
+        }, 500);
+      });
+    },
+    removeTodo: (root, args, context) => {
+      const { id } = args;
+      let todo = store.todos.some(todo => todo.id === id);
+      store.todos.splice(store.todos.indexOf(todo), 1);
+      return { id };
+    },
+    editTodo: (root, args, context) => {
+      const { id, text } = args;
+      let todo = store.todos.some(todo => todo.id === id);
+      todo.text = text;
+      return {
+        text,
+        id
+      };
+    }
+  }
+};
+
+module.exports = {
+  schema: makeExecutableSchema({
+    typeDefs,
+    resolvers
+  }),
+  context: (headers, secrets) => {
+    return {
+      headers,
+      secrets
+    };
+  }
+};

example/webpack.config.js

@@ -1,7 +1,7 @@
 const path = require('path');
 
 module.exports = {
-  entry: ['@babel/polyfill', './src/index.tsx'],
+  entry: ['@babel/polyfill', './src/app/index.tsx'],
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'bundle.js',
@@ -13,7 +13,7 @@ module.exports = {
         test: /\.js|.ts|.tsx?$/,
         include: [
           path.resolve(__dirname, '../src'),
-          path.resolve(__dirname, 'src'),
+          path.resolve(__dirname, 'src/app'),
         ],
         exclude: /node_modules/,
         loader: 'babel-loader',
@@ -25,7 +25,7 @@ module.exports = {
     modules: [
       'node_modules',
       path.resolve(__dirname, '../src'),
-      path.resolve(__dirname, 'src'),
+      path.resolve(__dirname, 'src/app'),
     ],
     extensions: ['.js', '.ts', '.tsx', '.json', '.jsx', '.css'],
   },

package.json

@@ -10,7 +10,9 @@
     "build-es": "npm run clean-es && babel src -d es --extensions \".ts,.tsx\"",
     "watch-es": "watch 'npm run build-es' src/ -d",
     "build": "builder concurrent --buffer build-lib build-es",
-    "demo:start": "webpack-dev-server --hot --inline --config 'example/webpack.config.js'",
+    "demo:start:graphql-server": "node example/src/server/index.js",
+    "demo:start:app": "webpack-dev-server --hot --inline --config 'example/webpack.config.js'",
+    "demo:start": "concurrently \"npm run demo:start:app\" \"npm run demo:start:graphql-server\"",
     "type-check": "tsc",
     "lint": "eslint src",
     "test": "jest"
@@ -55,11 +57,17 @@
     "babel-loader": "8.0.0-beta.0",
     "babel-plugin-module-resolver": "^3.0.0",
     "builder": "^3.2.3",
+    "concurrently": "^3.5.1",
+    "cors": "^2.8.4",
     "eslint": "^4.15.0",
     "eslint-config-formidable": "^3.0.0",
     "eslint-plugin-filenames": "^1.2.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-react": "^7.5.1",
+    "express": "^4.16.2",
+    "express-graphql": "^0.6.11",
+    "graphql-tools": "^2.18.0",
+    "isomorphic-fetch": "^2.2.1",
     "jest": "^22.1.4",
     "prop-types": "^15.6.0",
     "react": "^16.0.0-0",