docs(graphql-cookbook): Add Mocked network interface

Author: Urigo

public/docs/_examples/heroes-graphql/ts/rollup-config.js

@@ -42,7 +42,7 @@ export default {
       namedExports: {
         'node_modules/graphql-tools/dist/index.js': ['makeExecutableSchema' ],
         'node_modules/graphql/index.js': ['execute' ],
-        'node_modules/graphql-tag/printer.js': ['print'],
+        'node_modules/graphql-tag/bundledPrinter.js': ['print'],
         'node_modules/lodash/lodash.js': ['find', 'omit', 'assign', 'isFunction'],
       }
     }),

public/docs/_examples/heroes-graphql/ts/src/app/app.module.1.ts

@@ -0,0 +1,54 @@
+// #docplaster
+// #docregion
+
+// #docregion v1, v2
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule }   from '@angular/forms';
+import { HttpModule }    from '@angular/http';
+
+import { AppRoutingModule } from './app-routing.module';
+
+// #enddocregion v1
+
+// #docregion import-apollo
+import { ApolloModule } from 'apollo-angular';
+import { getClient } from './client';
+// #enddocregion import-apollo
+
+// #docregion v1
+import { AppComponent }         from './app.component';
+import { DashboardComponent }   from './dashboard.component';
+import { HeroesComponent }      from './heroes.component';
+import { HeroDetailComponent }  from './hero-detail.component';
+// #enddocregion v1, v2
+import { HeroSearchComponent }  from './hero-search.component';
+// #docregion v1, v2
+
+// #docregion apollo-ngmodule
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule,
+    InMemoryWebApiModule.forRoot(InMemoryDataService),
+    // #enddocregion v1
+    // #docregion v1
+    AppRoutingModule,
+    ApolloModule.forRoot(getClient)
+  ],
+  // #docregion search
+  declarations: [
+// #enddocregion apollo-ngmodule
+    AppComponent,
+    DashboardComponent,
+    HeroDetailComponent,
+    HeroesComponent,
+  // #enddocregion v1, v2
+    HeroSearchComponent
+  // #docregion v1, v2
+  ],
+  // #enddocregion search
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }

public/docs/_examples/heroes-graphql/ts/src/app/client.3.ts

@@ -0,0 +1,13 @@
+// #docregion
+import { ApolloClient } from 'apollo-client';
+// #docregion import-and-use
+import { mockNetworkInterface } from './mockedNetworkInterface';
+
+const client = new ApolloClient({
+  networkInterface: mockNetworkInterface
+});
+// #enddocregion import-and-use
+export function getClient(): ApolloClient {
+  return client;
+}
+// #enddocregion

public/docs/_examples/heroes-graphql/ts/src/app/heroes.component.ts

@@ -42,7 +42,7 @@ export class HeroesComponent implements OnInit {
         }
       `
     }).subscribe((queryResult: ApolloQueryResult<{ heroes: Hero[] }>) => {
-      this.heroes = queryResult.data.heroes;
+      this.heroes = queryResult.data.heroes.slice();
     });
   }
   // #enddocregion query-heroes

public/docs/_examples/heroes-graphql/ts/src/app/in-memory-graphql.ts

@@ -9,43 +9,7 @@ import { makeExecutableSchema } from 'graphql-tools';
 import { execute } from 'graphql';
 // #enddocregion import-graphql
 // #docregion graphql-schema
-const typeDefinitions = `
-# the model
-type Hero {
-  id: Int!
-  name: String!
-}
-
-# The schema allows the following queries:
-type Query {
-  heroes(search: String): [Hero]
-
-  hero(heroId: Int!): Hero
-}
-
-# This schema allows the following mutation:
-type Mutation {
-  updateHero (
-    id: Int!
-    name: String!
-  ): Hero
-
-  addHero (
-    heroName: String!
-  ): Hero
-
-  deleteHero (
-    id: Int!
-  ): Hero
-}
-
-# Tell the server which types represent the root query and root mutation types.
-# By convention, they are called RootQuery and RootMutation.
-schema {
-  query: Query
-  mutation: Mutation
-}
-`;
+import { typeDefinitions } from './schema';
 // #enddocregion graphql-schema
 // #docregion heroes-array
 let heroes = [

public/docs/_examples/heroes-graphql/ts/src/app/mockedNetworkInterface.ts

@@ -0,0 +1,17 @@
+// #docregion
+// #docregion imports
+import { 
+  makeExecutableSchema,
+  addMockFunctionsToSchema
+} from 'graphql-tools';
+import { mockNetworkInterfaceWithSchema } from 'apollo-test-utils';
+import { typeDefinitions } from './schema';
+// #enddocregion imports
+
+// #docregion create-interface
+const schema = makeExecutableSchema({
+  typeDefs: typeDefinitions
+});
+addMockFunctionsToSchema({ schema });
+export const mockNetworkInterface = mockNetworkInterfaceWithSchema({ schema });
+// #enddocregion create-interface

public/docs/_examples/heroes-graphql/ts/src/app/schema.ts

@@ -0,0 +1,38 @@
+// #docregion
+export const typeDefinitions = `
+# the model
+type Hero {
+  id: Int!
+  name: String!
+}
+
+# The schema allows the following queries:
+type Query {
+  heroes(search: String): [Hero]
+
+  hero(heroId: Int!): Hero
+}
+
+# This schema allows the following mutation:
+type Mutation {
+  updateHero (
+    id: Int!
+    name: String!
+  ): Hero
+
+  addHero (
+    heroName: String!
+  ): Hero
+
+  deleteHero (
+    id: Int!
+  ): Hero
+}
+
+# Tell the server which types represent the root query and root mutation types.
+# By convention, they are called RootQuery and RootMutation.
+schema {
+  query: Query
+  mutation: Mutation
+}
+`;

public/docs/_examples/heroes-graphql/ts/src/systemjs.config.extras.js

@@ -18,6 +18,9 @@ System.config({
     'redux':                              'npm:redux/dist/redux.min.js',
     // #enddocregion systemjs-apollo-client-map
 
+    // #docregion systemjs-apollo-test-utils-map
+    'apollo-test-utils':                              'npm:apollo-test-utils',
+
     // #docregion systemjs-graphql-server-map
     'graphql':                            'npm:graphql',
     'graphql-tools':                      'npm:graphql-tools',
@@ -27,6 +30,7 @@ System.config({
     'iterall':                            'npm:iterall',
     'lodash':                             'npm:lodash'
     // #enddocregion systemjs-graphql-server-map
+    // #enddocregion systemjs-apollo-test-utils-map
   },
   packages: {
 
@@ -41,6 +45,9 @@ System.config({
     },
     // #enddocregion systemjs-apollo-client-packages
 
+    // #docregion systemjs-apollo-test-utils-packages
+    'apollo-test-utils':          { main: '/dist/src/index.js', defaultExtension: 'js' },
+
     // #docregion systemjs-graphql-server-packages
     'graphql':     {
       main: './index.js',
@@ -64,5 +71,6 @@ System.config({
     'iterall':                    { main: './index.js', defaultExtension: 'js' },
     'lodash':                     { main: './index.js', defaultExtension: 'js' }
     // #enddocregion systemjs-graphql-server-packages
+    // #enddocregion systemjs-apollo-test-utils-packages
   }
 });

public/docs/_examples/package.json

@@ -48,7 +48,8 @@
     "@angular/upgrade": "2.4.5",
     "angular-in-memory-web-api": "~0.2.4",
     "apollo-angular": "^0.12.0",
-    "apollo-client": "1.0.0-rc.5",
+    "apollo-client": "^1.0.0-rc.5",
+    "apollo-test-utils": "^0.2.1",
     "core-js": "^2.4.1",
     "graphql": "^0.9.1",
     "graphql-subscriptions": "^0.3.1",