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

Commit 6d7fa3f

Browse files
committed
docs(cookbook/graphql): Fix jade paths after rebase
1 parent 2085201 commit 6d7fa3f

File tree

2 files changed

+45
-44
lines changed

2 files changed

+45
-44
lines changed

public/docs/_examples/toh-4/ts/src/app/hero.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// #docregion
12
export class Hero {
23
id: number;
34
name: string;

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

+44-44
Original file line numberDiff line numberDiff line change
@@ -96,9 +96,9 @@ include ../_util-fns
9696
the data might change and not be consistent across the app
9797

9898
#### Using a service
99-
100-
+makeExample('toh-6/ts/app/hero.service.ts', 'getHero','hero.service.ts (Fetch by Id)')
101-
+makeExample('toh-6/ts/app/hero-detail.component.ts', 'service-fetch-by-id','hero-detail.component.ts (Fetch by Id)')
99+
100+
+makeExample('toh-6/ts/src/app/hero.service.ts', 'getHero','hero.service.ts (Fetch by Id)')
101+
+makeExample('toh-6/ts/src/app/hero-detail.component.ts', 'service-fetch-by-id','hero-detail.component.ts (Fetch by Id)')
102102
:marked
103103
The problems with that approach:
104104

@@ -109,9 +109,9 @@ include ../_util-fns
109109

110110
#### Fetch data at the parent component and pass it down the component tree
111111

112-
+makeExample('toh-4/ts/app/hero.ts','','Declare the API type')
113-
+makeExample('toh-4/ts/app/hero-detail.component.ts','declaring-conponent-input','Declare the input')
114-
+makeExample('toh-4/ts/app/app.component.ts','calling-component','Using from parent')
112+
+makeExample('toh-4/ts/src/app/hero.ts','','Declare the API type')
113+
+makeExample('toh-4/ts/src/app/hero-detail.component.ts','declaring-conponent-input','Declare the input')
114+
+makeExample('toh-4/ts/src/app/app.component.ts','calling-component','Using from parent')
115115
:marked
116116
The problems with that approach:
117117

@@ -121,16 +121,16 @@ include ../_util-fns
121121

122122
#### Solution - Component based API
123123

124-
+makeExample('heroes-graphql/ts/app/hero-detail.component.ts','graphql-query','GraphQL query')
124+
+makeExample('heroes-graphql/ts/src/app/hero-detail.component.ts','graphql-query','GraphQL query')
125125
:marked
126126
As you can see, we placed the data dependency inside or next to the component itself and when the data dependency changes,
127127
the component is the only thing that needed to be changed -
128128
no service or parent component were harmed in the making of this component.
129129

130130
So now when we want to change the data dependencies, all changes are contained within the single component:
131131

132-
+makeExample('heroes-graphql/ts/app/hero-detail.component.1.ts','graphql-query-new-field','Adding `age` field to component')
133-
+makeExample('heroes-graphql/ts/app/hero-detail.component.1.html','template-new-field','Adding `age` field to template')
132+
+makeExample('heroes-graphql/ts/src/app/hero-detail.component.1.ts','graphql-query-new-field','Adding `age` field to component')
133+
+makeExample('heroes-graphql/ts/src/app/hero-detail.component.1.html','template-new-field','Adding `age` field to template')
134134
:marked
135135
### Network Performance
136136

@@ -183,13 +183,13 @@ code-example(language="sh" class="code-shell").
183183
Now let's initialize our client.
184184

185185
Create a new file called `client.ts` and place the following code:
186-
+makeExample('heroes-graphql/ts/app/client.1.ts')
186+
+makeExample('heroes-graphql/ts/src/app/client.1.ts')
187187
:marked
188188
This is the default initialization of Apollo and will call the `/graphql` endpoint.
189189

190190
In order to change the [settings](http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient\.constructor) of Apollo client,
191191
we will call it's constructor with different parameters, for example in order to change the endpoint we will do something like that:
192-
+makeExample('heroes-graphql/ts/app/client.2.ts', 'network-initialization')
192+
+makeExample('heroes-graphql/ts/src/app/client.2.ts', 'network-initialization')
193193
.l-sub-section
194194
:marked
195195
If you don't have a GraphQL server running, [jump to the section about creating a GraphQL server](#server).
@@ -198,8 +198,8 @@ code-example(language="sh" class="code-shell").
198198

199199
:marked
200200
Once we've finished initializing our Apollo-Client, we would want to add the Apollo module to our app's NgNodules with our configurations:
201-
+makeExample('heroes-graphql/ts/app/app.module.ts', 'import-apollo', 'app.module.ts (npm imports)')
202-
+makeExample('heroes-graphql/ts/app/app.module.ts', 'apollo-ngmodule', 'app.module.ts (NgModule)')
201+
+makeExample('heroes-graphql/ts/src/app/app.module.ts', 'import-apollo', 'app.module.ts (npm imports)')
202+
+makeExample('heroes-graphql/ts/src/app/app.module.ts', 'apollo-ngmodule', 'app.module.ts (NgModule)')
203203

204204
.l-main-section
205205
<a id="querying"></a>
@@ -208,22 +208,22 @@ code-example(language="sh" class="code-shell").
208208

209209
In GraphQL we always query a server which has a schema representing the data it exposes.
210210
Our server is built based on the Heroes tutorial and here is the schema:
211-
+makeExample('heroes-graphql/ts/app/in-memory-graphql.ts', 'graphql-schema', 'Heroes GraphQL Schema')
211+
+makeExample('heroes-graphql/ts/src/app/in-memory-graphql.ts', 'graphql-schema', 'Heroes GraphQL Schema')
212212
:marked
213213
So let's start by adding Apollo into our Component, let's import it and inject with in the constructor:
214-
+makeExample('heroes-graphql/ts/app/heroes.component.ts', 'import-apollo', 'heroes.component.ts')
215-
+makeExample('heroes-graphql/ts/app/heroes.component.ts', 'inject-apollo', 'heroes.component.ts')
214+
+makeExample('heroes-graphql/ts/src/app/heroes.component.ts', 'import-apollo', 'heroes.component.ts')
215+
+makeExample('heroes-graphql/ts/src/app/heroes.component.ts', 'inject-apollo', 'heroes.component.ts')
216216
:marked
217217
To query data with Apollo Client we just need to pass Apollo a query in the GraphQL query syntax, explained [here](http://graphql.org/learn/queries/).
218218

219219
In order to parse regular string literals as GraphQL, we will use the `gql` function from the `graphql-tag` library:
220-
+makeExample('heroes-graphql/ts/app/heroes.component.ts', 'import-graphql-tag', 'heroes.component.ts')
220+
+makeExample('heroes-graphql/ts/src/app/heroes.component.ts', 'import-graphql-tag', 'heroes.component.ts')
221221
:marked
222222
Now let's query:
223-
+makeExample('heroes-graphql/ts/app/heroes.component.ts', 'query-heroes', 'heroes.component.ts')
223+
+makeExample('heroes-graphql/ts/src/app/heroes.component.ts', 'query-heroes', 'heroes.component.ts')
224224
:marked
225225
and render:
226-
+makeExample('heroes-graphql/ts/app/heroes.component.1.html', 'render-heroes', 'heroes.component.html')
226+
+makeExample('heroes-graphql/ts/src/app/heroes.component.1.html', 'render-heroes', 'heroes.component.html')
227227

228228

229229
.l-main-section
@@ -267,13 +267,13 @@ code-example(language="json").
267267
You can get deep into the mutation syntax on the [GraphQL.org website](http://graphql.org/learn/queries/#mutations)
268268
:marked
269269
So first let's add a local function to add a hero to our template:
270-
+makeExample('heroes-graphql/ts/app/heroes.component.html', 'add', 'heroes.component.html')
270+
+makeExample('heroes-graphql/ts/src/app/heroes.component.html', 'add', 'heroes.component.html')
271271
:marked
272272
and component:
273-
+makeExample('heroes-graphql/ts/app/heroes.component.1.ts', 'add', 'heroes.component.ts')
273+
+makeExample('heroes-graphql/ts/src/app/heroes.component.1.ts', 'add', 'heroes.component.ts')
274274
:marked
275275
and now let's add an `addHero` mutation to that function using the `apollo.mutate` function:
276-
+makeExample('heroes-graphql/ts/app/heroes.component.ts', 'add-mutation', 'heroes.component.ts')
276+
+makeExample('heroes-graphql/ts/src/app/heroes.component.ts', 'add-mutation', 'heroes.component.ts')
277277
:marked
278278
You can see, that our mutation requires and variable and we pass it to the `mutate` function through the `variables` param.
279279

@@ -327,13 +327,13 @@ code-example(language="sh" class="code-shell").
327327
npm install graphql-tools --save
328328
:marked
329329
Now for the schema itself:
330-
+makeExample('heroes-graphql/ts/app/in-memory-graphql.ts', 'graphql-schema', 'Heroes GraphQL Schema')
330+
+makeExample('heroes-graphql/ts/src/app/in-memory-graphql.ts', 'graphql-schema', 'Heroes GraphQL Schema')
331331
.l-sub-section
332332
:marked
333333
The schema is pretty self explanatory, but if you want to dig deeper, check out [GraphQL.org `learn` section](http://graphql.org/learn/)
334334
:marked
335335
Next let's create our in-memory data:
336-
+makeExample('heroes-graphql/ts/app/in-memory-graphql.ts', 'heroes-array', 'Heroes Array')
336+
+makeExample('heroes-graphql/ts/src/app/in-memory-graphql.ts', 'heroes-array', 'Heroes Array')
337337
:marked
338338
Now we need to write a server that will resolve the queries that we will get from the client based on the schema.
339339

@@ -343,10 +343,10 @@ code-example(language="sh" class="code-shell").
343343
For the full explanation about how GraphQL resolvers work check out the [execution section](http://graphql.org/learn/execution/) of GraphQL.org
344344
:marked
345345
Let's create our resolvers:
346-
+makeExample('heroes-graphql/ts/app/in-memory-graphql.ts', 'resolvers', 'Resolvers')
346+
+makeExample('heroes-graphql/ts/src/app/in-memory-graphql.ts', 'resolvers', 'Resolvers')
347347
:marked
348348
We also used some functions from `lodash` so don't forget to install them from npm and import them:
349-
+makeExample('heroes-graphql/ts/app/in-memory-graphql.ts', 'import-lodash', 'Importing lodash')
349+
+makeExample('heroes-graphql/ts/src/app/in-memory-graphql.ts', 'import-lodash', 'Importing lodash')
350350
:marked
351351
As you can see, we created functions that correspond to each type of our schema and also to the mutations.
352352

@@ -359,15 +359,15 @@ code-example(language="sh" class="code-shell").
359359
:marked
360360
Now we need to connect the shema to the resolvers with the `makeExecutableSchema` function from
361361
the [graphql-tools](http://dev.apollodata.com/tools/graphql-tools/index.html) library:
362-
+makeExample('heroes-graphql/ts/app/in-memory-graphql.ts', 'import-graphql-tools', 'importing graphql-tools')
363-
+makeExample('heroes-graphql/ts/app/in-memory-graphql.ts', 'make-executable-schema', 'makeExecutableSchema')
362+
+makeExample('heroes-graphql/ts/src/app/in-memory-graphql.ts', 'import-graphql-tools', 'importing graphql-tools')
363+
+makeExample('heroes-graphql/ts/src/app/in-memory-graphql.ts', 'make-executable-schema', 'makeExecutableSchema')
364364
:marked
365365
Now that we have executable schema, let's execute it using the `graphql` library and export it so we can use it in our Apollo Client:
366-
+makeExample('heroes-graphql/ts/app/in-memory-graphql.ts', 'import-graphql', 'Dont forget to npm install')
367-
+makeExample('heroes-graphql/ts/app/in-memory-graphql.ts', 'execute-and-export', 'Execute and export')
366+
+makeExample('heroes-graphql/ts/src/app/in-memory-graphql.ts', 'import-graphql', 'Dont forget to npm install')
367+
+makeExample('heroes-graphql/ts/src/app/in-memory-graphql.ts', 'execute-and-export', 'Execute and export')
368368
:marked
369369
Now all that's left is to connect the new in-memory server into our Apollo Client configuration:
370-
+makeExample('heroes-graphql/ts/app/client.ts', '', 'client.ts')
370+
+makeExample('heroes-graphql/ts/src/app/client.ts', '', 'client.ts')
371371
:marked
372372
That's it. now you can run your application as if you had a GraphQL server connected to it but,
373373
there is no persistance - everything is running in-memory browser right now, so when you refresh the page, all changes will be lost.
@@ -385,15 +385,15 @@ code-example(language="sh" class="code-shell").
385385

386386
block file-summary
387387
+makeTabs(
388-
`heroes-graphql/ts/app/app.component.ts,
389-
heroes-graphql/ts/app/app.module.ts,
390-
heroes-graphql/ts/app/heroes.component.ts,
391-
heroes-graphql/ts/app/heroes.component.html,
392-
heroes-graphql/ts/app/heroes.component.css,
393-
heroes-graphql/ts/app/hero-detail.component.ts,
394-
heroes-graphql/ts/app/hero-detail.component.html,
395-
heroes-graphql/ts/app/in-memory-graphql.ts,
396-
heroes-graphql/ts/app/client.ts`,
388+
`heroes-graphql/ts/src/app/app.component.ts,
389+
heroes-graphql/ts/src/app/app.module.ts,
390+
heroes-graphql/ts/src/app/heroes.component.ts,
391+
heroes-graphql/ts/src/app/heroes.component.html,
392+
heroes-graphql/ts/src/app/heroes.component.css,
393+
heroes-graphql/ts/src/app/hero-detail.component.ts,
394+
heroes-graphql/ts/src/app/hero-detail.component.html,
395+
heroes-graphql/ts/src/app/in-memory-graphql.ts,
396+
heroes-graphql/ts/src/app/client.ts`,
397397
',,,,,,,,',
398398
`app.comp...ts,
399399
app.mod...ts,
@@ -407,10 +407,10 @@ block file-summary
407407
)
408408

409409
+makeTabs(
410-
`heroes-graphql/ts/app/app-routing.module.ts,
411-
heroes-graphql/ts/app/hero-search.component.ts,
412-
heroes-graphql/ts/app/hero-search.component.html,
413-
heroes-graphql/ts/app/hero-search.component.css`,
410+
`heroes-graphql/ts/src/app/app-routing.module.ts,
411+
heroes-graphql/ts/src/app/hero-search.component.ts,
412+
heroes-graphql/ts/src/app/hero-search.component.html,
413+
heroes-graphql/ts/src/app/hero-search.component.css`,
414414
null,
415415
`app-routing.modules.ts,
416416
hero-search.component.ts,

0 commit comments

Comments
 (0)