@@ -323,8 +323,8 @@ code-example(language="sh" class="code-shell").
323
323
With GraphQL you always query a server that has a schema representing the data it exposes.
324
324
A schema is or serves as a ...
325
325
326
- The server for this guide is based on the [Tour of Heroes](link here please). The schema
327
- is as follows:
326
+ The server for this guide is based on the [Tour of Heroes](link here please).
327
+ Copy the schema that follows into a file named `in-memory-graphql.ts` in the `app` directory :
328
328
329
329
.alert.is-important
330
330
:marked
@@ -350,26 +350,56 @@ code-example(language="sh" class="code-shell").
350
350
possible that I have missed some. I haven't gone into the `_example` files.
351
351
352
352
+ makeExample('heroes-graphql/ts/src/app/in-memory-graphql.ts' , 'graphql-schema' , 'app/in-memory-graphql.ts' )
353
- :marked
354
- Copy the schema into a file named `in-memory-graphql.ts` in the app directory.
355
353
356
- To use the schema, start by importing Apollo into `heroes.component.ts`,
354
+ :marked
355
+ To use the schema, start by importing `Apollo` into `heroes.component.ts`,
357
356
and injecting it into the constructor:
358
- + makeExample('heroes-graphql/ts/src/app/heroes.component.ts' , 'import-apollo' , 'heroes.component.ts' )
359
- + makeExample('heroes-graphql/ts/src/app/heroes.component.ts' , 'inject-apollo' , 'heroes.component.ts' )
357
+ + makeExample('heroes-graphql/ts/src/app/heroes.component.ts' , 'import-apollo' , 'heroes.component.ts (excerpt) ' )
358
+ + makeExample('heroes-graphql/ts/src/app/heroes.component.ts' , 'inject-apollo' , 'heroes.component.ts (excerpt) ' )
360
359
:marked
361
- To query data with the Apollo client, pass Apollo a query in the GraphQL
362
- query syntax, explained [here](http://graphql.org/learn/queries/).
360
+ Now that the schema is available to the app, the next step is querying it.
361
+ In the component, import `gql` from the `graphql-tag` library.
362
+ The `gql` function parses regular string literals as GraphQL.
363
+
364
+ .alert.is-important
365
+ :marked
366
+ Uri: Could you explain in just a sentence or two what it means when
367
+ we parse string literals as GraphQL?
363
368
364
- In order to parse regular string literals as GraphQL, we will use the `gql` function from the `graphql-tag` library:
365
369
+ makeExample('heroes-graphql/ts/src/app/heroes.component.ts' , 'import-graphql-tag' , 'heroes.component.ts' )
370
+
366
371
:marked
367
- Now let's query:
372
+ To query data with the Apollo Client, pass `Apollo` a query in the GraphQL
373
+ query syntax. In this example, ......
374
+ .alert.is-important
375
+ :marked
376
+ Uri: Could you give a brief explanation of what's happening in the below
377
+ code snippet? Please touch on if we are putting it in the component (I think so),
378
+ and what each section means. This is a really important part of this tutorial and
379
+ people will be very interested in the unique syntax. Brief is fine, since we don't
380
+ want to go too far into it, but we should exaplain on this page what each line means.
381
+ This might be 2 or 3 short paragraphs. Please also touch on the use of observables.
382
+ You can say something to the effect that we are using observables here because x and
383
+ they can tell that because of `subscribe`. You could include a link to ....(I'm finding the right link...).
384
+
368
385
+ makeExample('heroes-graphql/ts/src/app/heroes.component.ts' , 'query-heroes' , 'heroes.component.ts' )
386
+
369
387
:marked
370
- and render:
388
+ For more information on GraphQL queries, see the GraphQL documentation on
389
+ [Queries and Mutations](http://graphql.org/learn/queries/).
390
+ :marked
391
+ Next, update the template so it will display the results of the query.
371
392
+ makeExample('heroes-graphql/ts/src/app/heroes.component.1.html' , 'render-heroes' , 'heroes.component.html' )
372
393
394
+ .alert.is-important
395
+ :marked
396
+ Uri:
397
+
398
+ 1. Since we haven't talked about the template yet, do you think we should show
399
+ the whole thing with some comments making this section (above) stand out?
400
+
401
+ 2. Do the results show up at this point? If so, maybe we should mention that. If not,
402
+ we should say so.
373
403
374
404
.l-main-section
375
405
<a id =" mutation" ></a >
0 commit comments