You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+47-14Lines changed: 47 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# GraphQL API Fundamentals
2
2
3
-
This exercise is part of the [React GraphQL Academy](http://reactgraphql.academy)learning material. The goal of the exercise is to help you get started transitioning from REST to GraphQL.
3
+
This exercise is part of the [React GraphQL Academy](http://reactgraphql.academy)training material.
4
4
5
5
## Our teaching method
6
6
@@ -23,6 +23,8 @@ More on our [teaching method](https://reactgraphql.academy/blog/react-graphql-ac
23
23
24
24
## Exercise part 1
25
25
26
+
🎯 The goal of this exercise it to help you get familiar with GraphQL queries and the in-browser IDE Playground.
27
+
26
28
Given the following [GraphQL API](https://us-central1-rga-mocked-apis.cloudfunctions.net/graphql):
27
29
28
30
- Query a list with all the training and retrieve the title and language for each
@@ -32,8 +34,6 @@ Given the following [GraphQL API](https://us-central1-rga-mocked-apis.cloudfunct
32
34
33
35
## Exercise part 2
34
36
35
-
### To get started
36
-
37
37
We are going to create our own GraphQL API on top of this [REST API](https://api.reactgraphql.academy/rest/trainings)
@@ -44,10 +44,10 @@ We are going to create our own GraphQL API on top of this [REST API](https://api
44
44
45
45
### 🥑 Before we start
46
46
47
-
- Don't forget to checkout the `fundamentals-v2` branch, install the dependencies, and let me walk you through the code meanwhile.
47
+
- Don't forget to checkout the `fundamentals-v2` branch, and install the dependencies.
48
48
- We use nodemon in the `start` script, so every time you save, the server will restart automatically.
49
-
- The `src/index.js` is the [getting started tutorial](https://www.apollographql.com/docs/apollo-server/getting-started/) from Apollo.
50
-
- Let's replace the schema:
49
+
- The `src/index.js` is the [getting started tutorial](https://www.apollographql.com/docs/apollo-server/getting-started/) from Apollo. Let me walk you through our code.
50
+
- Let's do a small exercise to warm up, let's replace in the schema:
- Youcandefineanarrayusingsquarebracketsandthetype, example `[Book]`
@@ -147,7 +149,7 @@ const resolvers = {
147
149
148
150
We could also create a new field that returns the upper case version of the title without changing the title field. Example:
149
151
150
-
⚠️ Learners implement (⏳ only 5 minutes to implement and write a query to test it!):
152
+
⚠️ Learners implement (⏳ you only 5 minutes to implement and write a query to test it!):
151
153
152
154
```graphql
153
155
typeTraining {
@@ -201,6 +203,8 @@ query authorName {
201
203
202
204
### Tasks
203
205
206
+
🎯 The goal of the following tasks it to help you understand how arguments and relationships work in GraphQL.
207
+
204
208
To complete the tasks you'll use the helper functions that are at the bottom of the file `src/index.js`
205
209
206
210
-[ ]4. Implement a new field in the `Query` type that returns a single training given an id. You need to fetch the training from this endpoint `https://api.reactgraphql.academy/rest/trainings/` + `id`. 🕵️♂️ Hint, you need to pass [arguments](https://graphql.org/graphql-js/passing-arguments/) to the field, and then use the second argument in the resolver. There is a helper function at the bottom of `src/index.js`.
@@ -243,28 +247,53 @@ query getTraining {
243
247
244
248
#### 🏋️♀️ Bonus exercise part 3
245
249
246
-
Create the types and resolvers so the following query works:
250
+
-[ ] Bonus 1. Create the types and resolvers so the following query works:
247
251
248
252
```graphql
249
-
querygetDangerousDiscount {
253
+
querygetPotentiallyDangerousDiscount {
250
254
discount(id: "dis:421") {
251
255
code
252
256
training {
253
257
title
254
258
discounts {
255
259
code
256
-
# why this query could be dangerous?
260
+
# why this type of query could be potentially dangerous?
257
261
}
258
262
}
259
263
}
260
264
}
261
265
```
262
266
263
-
Bonus final questions:
264
-
265
-
- Once the getDangerousDiscount query is implemented, do you see any problem/ vulnerability issues on that query?
267
+
- Once the getPotentiallyDangerousDiscount query is implemented, do you see any problem/ vulnerability issues on that type of query?
266
268
- Should the relationship Discount to Training be non-nullable? Meaning `training: Training` or `training: Training!`
267
269
270
+
*[ ] Bonus 2. If we run the following query, is the GraphQL Server fetching the training from the rest API (you can use a console.log in the resolver)?
271
+
272
+
```graphql
273
+
query {
274
+
discount(id: "dis:421") {
275
+
code
276
+
# with the training field commented out, is the training resolver invoked on the API?
277
+
# training {
278
+
# title
279
+
# }
280
+
}
281
+
}
282
+
```
283
+
284
+
-[ ] Bonus 3. Add a `first` argument to the field discounts in the `Training` object type. The `first` argument is an integer that makes the field `discounts` return the first N discounts, being N the value of the argument. Once implemented, you should be able to run the following query
285
+
286
+
```graphql
287
+
querygetTraining {
288
+
training(id: "tra:22") {
289
+
title
290
+
discounts(first: 2) {
291
+
code
292
+
}
293
+
}
294
+
}
295
+
```
296
+
268
297
🤸🏾Do you want some extra workout? Create an [enumeration](https://graphql.org/learn/schema/#enumeration-types) for the languages. Add field language to the Training object type that uses the language enum.
269
298
270
299
## 🧘♀️Homework
@@ -298,3 +327,7 @@ You are going to build a GraphQL API on top of an existing REST API. Steps:
298
327
## License
299
328
300
329
This material is available for private, non-commercial use under the [GPL version 3](http://www.gnu.org/licenses/gpl-3.0-standalone.html).
0 commit comments