Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 19848de

Browse files
kapunahelewongUrigo
authored andcommitted
docs(cookbook/graphql): edits up to Performing a Mutation
1 parent 08c53d8 commit 19848de

File tree

1 file changed

+42
-12
lines changed

1 file changed

+42
-12
lines changed

public/docs/ts/latest/cookbook/graphql.jade

Lines changed: 42 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -323,8 +323,8 @@ code-example(language="sh" class="code-shell").
323323
With GraphQL you always query a server that has a schema representing the data it exposes.
324324
A schema is or serves as a ...
325325

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:
328328

329329
.alert.is-important
330330
:marked
@@ -350,26 +350,56 @@ code-example(language="sh" class="code-shell").
350350
possible that I have missed some. I haven't gone into the `_example` files.
351351

352352
+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.
355353

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`,
357356
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)')
360359
: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?
363368

364-
In order to parse regular string literals as GraphQL, we will use the `gql` function from the `graphql-tag` library:
365369
+makeExample('heroes-graphql/ts/src/app/heroes.component.ts', 'import-graphql-tag', 'heroes.component.ts')
370+
366371
: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+
368385
+makeExample('heroes-graphql/ts/src/app/heroes.component.ts', 'query-heroes', 'heroes.component.ts')
386+
369387
: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.
371392
+makeExample('heroes-graphql/ts/src/app/heroes.component.1.html', 'render-heroes', 'heroes.component.html')
372393

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.
373403

374404
.l-main-section
375405
<a id="mutation"></a>

0 commit comments

Comments
 (0)