@@ -96,9 +96,9 @@ include ../_util-fns
96
96
the data might change and not be consistent across the app
97
97
98
98
#### 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)' )
102
102
:marked
103
103
The problems with that approach:
104
104
@@ -109,9 +109,9 @@ include ../_util-fns
109
109
110
110
#### Fetch data at the parent component and pass it down the component tree
111
111
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' )
115
115
:marked
116
116
The problems with that approach:
117
117
@@ -121,16 +121,16 @@ include ../_util-fns
121
121
122
122
#### Solution - Component based API
123
123
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' )
125
125
:marked
126
126
As you can see, we placed the data dependency inside or next to the component itself and when the data dependency changes,
127
127
the component is the only thing that needed to be changed -
128
128
no service or parent component were harmed in the making of this component.
129
129
130
130
So now when we want to change the data dependencies, all changes are contained within the single component:
131
131
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' )
134
134
:marked
135
135
### Network Performance
136
136
@@ -183,13 +183,13 @@ code-example(language="sh" class="code-shell").
183
183
Now let's initialize our client.
184
184
185
185
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' )
187
187
:marked
188
188
This is the default initialization of Apollo and will call the `/graphql` endpoint.
189
189
190
190
In order to change the [settings](http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient\.constructor) of Apollo client,
191
191
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' )
193
193
.l-sub-section
194
194
:marked
195
195
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").
198
198
199
199
:marked
200
200
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)' )
203
203
204
204
.l-main-section
205
205
<a id =" querying" ></a >
@@ -208,22 +208,22 @@ code-example(language="sh" class="code-shell").
208
208
209
209
In GraphQL we always query a server which has a schema representing the data it exposes.
210
210
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' )
212
212
:marked
213
213
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' )
216
216
:marked
217
217
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/).
218
218
219
219
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' )
221
221
:marked
222
222
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' )
224
224
:marked
225
225
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' )
227
227
228
228
229
229
.l-main-section
@@ -267,13 +267,13 @@ code-example(language="json").
267
267
You can get deep into the mutation syntax on the [GraphQL.org website](http://graphql.org/learn/queries/#mutations)
268
268
:marked
269
269
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' )
271
271
:marked
272
272
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' )
274
274
:marked
275
275
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' )
277
277
:marked
278
278
You can see, that our mutation requires and variable and we pass it to the `mutate` function through the `variables` param.
279
279
@@ -327,13 +327,13 @@ code-example(language="sh" class="code-shell").
327
327
npm install graphql-tools --save
328
328
:marked
329
329
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' )
331
331
.l-sub-section
332
332
:marked
333
333
The schema is pretty self explanatory, but if you want to dig deeper, check out [GraphQL.org `learn` section](http://graphql.org/learn/)
334
334
:marked
335
335
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' )
337
337
:marked
338
338
Now we need to write a server that will resolve the queries that we will get from the client based on the schema.
339
339
@@ -343,10 +343,10 @@ code-example(language="sh" class="code-shell").
343
343
For the full explanation about how GraphQL resolvers work check out the [execution section](http://graphql.org/learn/execution/) of GraphQL.org
344
344
:marked
345
345
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' )
347
347
:marked
348
348
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' )
350
350
:marked
351
351
As you can see, we created functions that correspond to each type of our schema and also to the mutations.
352
352
@@ -359,15 +359,15 @@ code-example(language="sh" class="code-shell").
359
359
:marked
360
360
Now we need to connect the shema to the resolvers with the `makeExecutableSchema` function from
361
361
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' )
364
364
:marked
365
365
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' )
368
368
:marked
369
369
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' )
371
371
:marked
372
372
That's it. now you can run your application as if you had a GraphQL server connected to it but,
373
373
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").
385
385
386
386
block file-summary
387
387
+ 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` ,
397
397
',,,,,,,,' ,
398
398
` app.comp...ts,
399
399
app.mod...ts,
@@ -407,10 +407,10 @@ block file-summary
407
407
)
408
408
409
409
+ 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` ,
414
414
null ,
415
415
` app-routing.modules.ts,
416
416
hero-search.component.ts,
0 commit comments