feat(examples): add example that illustrates modular typeDef and resolver file organization

Author: jboothe

examples/modular-resolvers/README.md

@@ -0,0 +1,133 @@
+# Modular Resolvers and TypeDefs
+
+This `graphql-yoga` example written in Typescript illustrates how you can have complete freedom 
+over the structure of your **typeDef** and **resolver** files by using the 
+[`merge-graphql-schemas` utility library](https://github.com/okgrow/merge-graphql-schemas). 
+
+## Get Started
+
+**Clone the repository:**
+
+```sh
+git clone https://github.com/graphcool/graphql-yoga.git
+cd graphql-yoga/examples/modular-resolvers
+```
+
+**Install dependencies and run the app:**
+
+```sh
+npm install # or yarn install
+npm start   # or yarn start
+```
+
+## Run the Queries
+
+Open your browser at [http://localhost:4004](http://localhost:4004) and start sending queries in the Playground.
+
+**In the left pane, run the `welcome` Query:**
+
+```graphql
+{
+  welcome(yourNickname:"Superstar")
+}
+```
+
+The server returns the following response:
+
+```json
+{
+  "data": {
+    "welcome": "Welcome, Superstar!"
+  }
+}
+```
+
+**Query a specific `user` by id:**
+
+```graphql
+{
+  user(id:2){
+    id
+    userName
+    firstName
+    lastName
+  }
+}
+```
+
+The server returns the following response:
+
+```json
+{
+  "data": {
+    "user": {
+      "id": 2,
+      "firstName": "Kimberly",
+      "lastName": "Jones",
+      "userName": "kim"
+    }
+  }
+}
+```
+
+**Query all `users`:**
+
+```graphql
+{
+  users{
+    userName
+  }
+}
+```
+
+The server returns the following response:
+
+```json
+{
+  "data": {
+    "users": [
+      {
+        "userName": "john"
+      },
+      {
+        "userName": "kim"
+      }
+    ]
+  }
+}
+```
+
+## Implementation
+
+The merging takes place in the [/resolvers/index.ts](./resolvers/index.ts) 
+and the [/typeDefs/index.ts](./typeDefs/index.ts) files. 
+
+Using this approach, you're free to structure resolver and typeDef files as you see fit. 
+
+>To avoid issues, unique naming of Queries, Mutations and Subscriptions is your responsibility.
+
+Now you can structure by **function**...
+```
++-- graphql
+|   +-- resolvers
+|   |   +-- user.resolvers.js/ts
+|   |   +-- welcome.resolvers.js/ts
+|   |   +-- index.ts  << Merges all `*.resolvers.*` files
+|   +-- typeDefs
+|   |   +-- user.graphql
+|   |   +-- welcome.graphql
+|   |   +-- index.ts  <<< Merges all `typeDef` files
+```
+
+Or by **type**...
+```
++-- graphql
+|   +-- entity
+|   |   +-- user
+|   |   |   +-- user.graphql
+|   |   |   +-- user.resolvers.js/ts
+|   |   +-- welcome
+|   |   |   +-- welcome.graphql
+|   |   |   +-- welcome.resolvers.js/ts
+|   |   +-- index.ts << Merges all `*.resolvers.*` and typeDef files
+```

examples/modular-resolvers/data/data.ts

@@ -0,0 +1,8 @@
+export default {
+
+    users: [
+        { id: 1, userName: 'john', firstName: 'John', lastName: 'Smith' },
+        { id: 2, userName: 'kim', firstName: 'Kimberly', lastName: 'Jones' },
+    ],
+
+};

examples/modular-resolvers/index.ts

@@ -0,0 +1,14 @@
+import { GraphQLServer } from "graphql-yoga";
+import { default as typeDefs } from './typeDefs'
+import { default as resolvers } from './resolvers'
+
+const options = { port: 4004 };
+
+const server = new GraphQLServer({
+  typeDefs,
+  resolvers
+});
+
+server.start(options, () =>
+  console.log(`Server is running ⚡ on localhost:${options.port}`))
+  .catch(err => console.error('connection Error', err));

examples/modular-resolvers/package.json

@@ -0,0 +1,18 @@
+{
+    "name": "modular-resolvers",
+    "main": "index.js",
+    "scripts": {
+        "start": "nodemon --exec ts-node index.ts"
+    },
+    "dependencies": {
+        "graphql": "^0.13.1",
+        "graphql-yoga": "^1.6.1",
+        "merge-graphql-schemas": "^1.5.0"
+    },
+    "devDependencies": {
+        "@types/node": "^8.0.29",
+        "nodemon": "^1.17.1",
+        "ts-node": "5.0.1",
+        "typescript": "2.7.2"
+    }
+}

examples/modular-resolvers/resolvers/index.ts

@@ -0,0 +1,15 @@
+import * as path from "path";
+import { mergeResolvers, fileLoader } from "merge-graphql-schemas";
+
+/* MANUAL APPROACH: Update this file manually with each resolver file */
+// import userResolvers from "./user.resolvers";
+// import welcomeResolvers from "./welcome.resolvers";
+// const resolversArray = [userResolvers, welcomeResolvers];
+
+/*  AUTOMATED APPROACH: Put your resolvers anywhere 
+    with ".resolvers.[js/ts]" naming convention */
+const resolversArray = fileLoader(path.join(__dirname, "./**/*.resolvers.*"));
+
+const resolvers = mergeResolvers(resolversArray);
+
+export default resolvers;

examples/modular-resolvers/resolvers/user.resolvers.ts

@@ -0,0 +1,11 @@
+import data from './../data/data';
+
+export default {
+  Query: {
+    user: async (_, { id }) => {
+      const user = await data.users.find(user => user.id === id)
+      return user;
+    },
+    users: () => data.users
+  }
+};

examples/modular-resolvers/resolvers/welcome.resolvers.ts

@@ -0,0 +1,5 @@
+export default {
+  Query: {
+    welcome: (_, { yourNickname }) => `Welcome, ${yourNickname || "here"}!`
+  }
+};

examples/modular-resolvers/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "es2017",
+      "esnext.asynciterable"
+    ],
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "./dist",
+    "sourceMap": true,
+    "noImplicitAny": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+  }
+}

examples/modular-resolvers/typeDefs/index.ts

@@ -0,0 +1,7 @@
+import * as path from "path";
+import { fileLoader, mergeTypes } from "merge-graphql-schemas";
+
+const typesArray = fileLoader(path.join(__dirname, "./"));
+const typesMerged = mergeTypes(typesArray);
+
+export default typesMerged;

examples/modular-resolvers/typeDefs/user.typedefs.graphql

@@ -0,0 +1,11 @@
+type User {
+  id: Int!
+  userName: String!
+  firstName: String!
+  lastName: String!
+}
+
+type Query {
+  user(id: Int!): User!
+  users: [User!]!
+}