@@ -274,6 +274,19 @@ code-example(language="sh" class="code-shell").
274
274
of `ApolloClient`, call its constructor with different parameters.
275
275
Go to the [Apollo documentation](http://dev.apollodata.com/angular2/initialization.html#creating-client) for further resources.
276
276
277
+ :marked
278
+ Usually you need to query an existing server.
279
+ The server for this guide is based on the [Tour of Heroes](ts/latest/tutorial/) app.
280
+ The starter app already has an in-memory GraphQL server prepared.
281
+
282
+ Now all that's left is to connect the in-memory server to the Apollo Client configuration
283
+ by importing `networkInterface` and adding it to the `client` constant in `client.ts`.
284
+ + makeExample('heroes-graphql/ts/src/app/client.ts' , '' , 'client.ts' )
285
+ .l-sub-section
286
+ :marked
287
+ In order to learn how to create the GraphQL server for this example, follow the instructions on
288
+ [Appendix: Setting up a GraphQL server](#server).
289
+
277
290
:marked
278
291
After initializing the Apollo Client, import the `ApolloModule` and `getClient`
279
292
which you just configured in `client.ts` into the app's root module:
@@ -302,21 +315,12 @@ code-example(language="sh" class="code-shell").
302
315
mutations, which are _actions_ that you
303
316
can call on the server, similar to a POST request in REST.
304
317
305
- Here is an example schema:
318
+ Here is the schema the Tour of Heroes server in the app use :
306
319
307
320
+ makeExample('heroes-graphql/ts/src/app/in-memory-graphql.ts' , 'graphql-schema' , 'Tour of heroes schema' )
308
321
309
- .l-sub-section
310
- :marked
311
- Usually you need to query an existing server.
312
-
313
- The server for this guide is based on the [Tour of Heroes](ts/latest/tutorial/) app.
314
-
315
- In order to create the GraphQL server for this example, follow the instructions on
316
- [Appendix: Setting up a GraphQL server](#server).
317
-
318
322
:marked
319
- Once you have a server, to start querying data, begin by importing `Apollo` into `heroes.component.ts`,
323
+ Once you have a server, which is prepared already in this app, to start querying data, begin by importing `Apollo` into `heroes.component.ts`,
320
324
and injecting it into the constructor:
321
325
+ makeExample('heroes-graphql/ts/src/app/heroes.component.ts' , 'import-apollo' , 'heroes.component.ts (excerpt)' )
322
326
+ makeExample('heroes-graphql/ts/src/app/heroes.component.ts' , 'inject-apollo' , 'heroes.component.ts (excerpt)' )
0 commit comments