docs: rename and add spacex project

Author: Kian Khoshnoodpour

internals/wiki/01-my-first-query.md

@@ -54,7 +54,7 @@ Add the missing query, using the exact same name used as in the `schema.ts` file
 
 ## Assignment 1.3: Run your query in the playground
 
-Now you should be able to run your query in the GraphQL playground environment: <http://localhost:3000/api/graphql>.
+Now you should be able to run your query in the GraphQL playground environment: <http://localhost:3007/api/graphql>.
 
 > The playground provides an environment to test queries. It includes auto-complete, as you start typing it will provide suggestions. Click on the `schema` button on the right to see the entire schema.
 
@@ -141,7 +141,7 @@ const query: QueryResolvers = {
 
 Now we can query the fields on type **List** from the playground, using the **lists** query.
 
-<http://localhost:3000/api/graphql>:
+<http://localhost:3007/api/graphql>:
 
 ```graphql
 {

internals/wiki/02-calling-graphql-from-react.md

@@ -122,7 +122,7 @@ const MyPage: NextPage = () => {
 export default withApollo(MyPage);
 ```
 
-You can now see your page, component and hopefully your data from GraphQL at <http://localhost:3000/my-page>.
+You can now see your page, component and hopefully your data from GraphQL at <http://localhost:3007/my-page>.
 
 # Chapter 2 - Solution: Calling GraphQL from React
 
@@ -211,4 +211,4 @@ const ListsPage: NextPage = () => {
 export default withApollo(ListsPage);
 ```
 
-Now we can go to <http://localhost:3000/favorites> and see all the users favorite lists in a nice box.
+Now we can go to <http://localhost:3007/favorites> and see all the users favorite lists in a nice box.

internals/wiki/04-covid-app.md

@@ -1,14 +1,15 @@
 ## Chapter 4: Project - COVID app
 
 > [Backend, Frontend]
+> Continue from branch `master`
 
 In this chapter we're going to use what we learned so far to build a covid app.
 
 We're going to implement a GraphQL API using the Novel COVID open API at https://disease.sh/docs/#/JHUCSSE/get_v2_historical
 
 We're going to use the endpoint: `https://disease.sh/v2/historical?lastdays=10`
 
-### 4.1 Assignment: Figure out what this endpoint provides
+### Assignment 4.1: Figure out what this endpoint provides
 
 First we look in the swagger at Responses where you can find the schema/model it provides:
 
@@ -31,15 +32,15 @@ The schema is important to think about, since you will find out you can't take i
 
 Create a schema based on the swagger definition. Then place this schema in `./pages/graphql/schema.ts`. Expose it via the query name `covidHistorical` under the Query part.
 
-### 4.2 Assignment: Now expose the data in the form you schematised
+### Assignment 4.2: Now expose the data in the form you schematised
 
 Almost there, now we have to fetch the actual data and resolve this. Add the 'covidHistorical' resolver in `./pages/graphql/resolver.ts` and fetch the async data and now normalise this data so it matches your schema!
 
 ```js
 const response = await fetch('https://disease.sh/v2/historical?lastdays=10');
 ```
 
-Its time to code, and at same time maybe look at http://localhost:3000/api/graphql to debug on the fly. Its also possible to run the app in debug mode, stop current one and then run `yarn dev:inspect`.
+Its time to code, and at same time maybe look at http://localhost:3007/api/graphql to debug on the fly. Its also possible to run the app in debug mode, stop current one and then run `yarn dev:inspect`.
 
 After you exposed the data, you will find out that not every field is how you expected it to be. Also it happens that after exposing the data the schema you defined may not be so smart (for example repetition of data). So its common you adjust in this phase. It also happens when exposing more then one consumer. Think more, less problems on the long run.
 
@@ -54,3 +55,17 @@ When you are done, run `yarn schema:linter`
 The end result can be something like:
 
 <img src="./img/4-result.png" width="400px" />
+
+## Chapter 4 - Solution: Project - COVID app
+
+### Assignment Solutions
+
+For the assignment solutions see branch `chapter-4-solution`
+
+### Bonus Assignment Solutions
+
+For the bonus assignment solutions see branches
+
+- `chapter-4-bonus-1`
+- `chapter-4-bonus-2`
+- `chapter-4-bonus-3`

internals/wiki/09-union-types.md

@@ -74,7 +74,7 @@ export const resolvers: Resolvers = {
 
 ## Assignment 9.3: Display the list items in your frontend
 
-Now you should be able to run your union query in the GraphQL playground environment: http://localhost:3000/api/graphql.
+Now you should be able to run your union query in the GraphQL playground environment: http://localhost:3007/api/graphql.
 
 You can test it with different id's (1 = product, 3 = recipe ).
 

internals/wiki/14-integration-testing.md

@@ -20,7 +20,7 @@ This could of course also be a mutation.
 To illustrate using `cURL`:
 
 ```sh
-curl --location --request POST 'http://localhost:3000/api/graphql' \
+curl --location --request POST 'http://localhost:3007/api/graphql' \
 --header 'Content-Type: application/json' \
 --data-raw '{ "query": "query myQuery(\$id: id) { myQuery { myData } }" }'
 ```

internals/wiki/15-spacex-app.md

@@ -0,0 +1,174 @@
+## Final Project: Spacex App
+
+> Backend | Frontend
+> Continue from branch `master`
+
+For this exercise we are going to look at the api of `https://api.spacexdata.com/v4/launches/latest` You will start from 'master' branch.
+
+### Assignment 1: Expose its ships
+
+In this endpoint you will find the following data:
+
+```
+"ships": [
+ "5ea6ed2e080df4000697c908",
+ "5ea6ed2e080df4000697c907",
+ "5ea6ed2f080df4000697c90b"
+],
+```
+
+Create the graphql query 'spacexShips' which returns these ship id's. Nothing more. Make sure you can query:
+
+```
+{
+ spacexShips {
+ id
+ }
+}
+```
+
+### Assignment 2: Expose ship information
+
+We returned the ship identification number. On the endpoint: `https://api.spacexdata.com/v4/ships/ID` you will find ship information, so an example is: `https://api.spacexdata.com/v4/ships/5ea6ed2e080df4000697c908`.
+
+Now add a field 'info' to this SpacexShip and resolve with the above endpoint. Expose: 'type', 'image' and 'launches'. For the last ones only its id. Keep it simple. No need to use dataloader yet.
+
+### Assignment 3: Introduce dataloader for ship information
+
+We saw we did request the ship information three times. This is not optimal. We dont have the batched endpoint available yet, but we can start optimizing our endpoint so it will execute the service call only once. Sometimes our services are not optimized for batches but we can start poor mens batching on our side.
+
+Add a dataloader on the context (see for context `./pages/api/graphql/index`). And consume it on the info endpoint. You will need a Promise.all and as learned from our workshop dataloader passes a collection of id's and returns the responses in the same order.
+
+### Assignment 4: Introduce dataloader and add launch information to a launch
+
+We have learned how to extend and resolve on field level with having a dataloader in place. We start now doing the same for launch information.
+
+The endpoint is: `https://api.spacexdata.com/v4/launches/ID` and example is `https://api.spacexdata.com/v4/launches/5eb87d0dffd86e000604b35b`.
+
+Only expose the images collection. You will find it in:
+
+```
+"links": {
+ ...
+ "flickr": {
+ "small": [],
+ "original": [
+ "https://farm5.staticflickr.com/4477/38056454431_a5f40f9fd7_o.jpg",
+ "https://farm5.staticflickr.com/4455/26280153979_b8016a829f_o.jpg",
+ "https://farm5.staticflickr.com/4459/38056455051_79ef2b949a_o.jpg",
+ "https://farm5.staticflickr.com/4466/26280153539_ecbc2b3fa9_o.jpg",
+ "https://farm5.staticflickr.com/4482/26280154209_bf08d76361_o.jpg",
+ "https://farm5.staticflickr.com/4493/38056455211_a4565a9cee_o.jpg"
+ ]
+ ]
+},
+```
+
+Make sure we are able to execute the following query:
+
+```
+{
+ spacexShips {
+ id
+ info {
+ type
+ image
+ launches {
+ id
+ images
+ }
+ }
+ }
+}
+```
+
+### Assignment 5: Add cacheControl in the service
+
+We see that we request lots of services, but we can cache from using the CacheControl directive. Lets cache all for 5 minutes shall we?
+
+Turn on cacheControl on `./pages/api/graphql/index`.
+
+```
+ cacheControl: true,
+ plugins: [responseCachePlugin()],
+```
+
+Now:
+
+- Add cacheControl directive to schema
+- Add cacheControl directive to the schema types
+
+Restart the server if you added all. If you did it correctly you will see no cache hint in playground and you will see no real service calls.
+
+So good, when playground extension is like:
+
+```
+"extensions": {
+ "cacheControl": {
+ "version": 1,
+ "hints": []
+ }
+ }
+```
+
+### Assignment 6: Expose the data in an app (FRONTEND)
+
+When you followed the previous steps (or checkout mpth-spacex-5 when you didnt want to do the server part) you are able to do the following query:
+
+```
+{
+ spacexShips {
+ id
+ info {
+ type
+ image
+ launches {
+ id
+ images
+ }
+ }
+ }
+}
+```
+
+Make a new component and expose it on the first page.
+
+<img src="./img/mpth.png" width="400px" />
+
+### Assignment 7: Reuse dataloader for retrieving sinlge ship
+
+Now add a single ship query and show us how you would do it. Its simple if you have the dataloader setup in place. Dont think too hard.
+
+Make sure you can do the following query as the end of your coding results
+
+```
+{
+ spacexShip(id:"5ea6ed2e080df4000697c908") {
+ id
+ info {
+ type
+ }
+ }
+}
+```
+
+So add the query 'spacexShip' to your schema and show us how to resolve.
+
+### Bonus
+
+- show the images in the frontend
+- make endpoint for specific launch and re-use the dataloader. You will see you dont have to code anything simply use the dataloader
+- make two frontend components with a different launch ID and see how it works in the frontend (batched query)
+- do basically anything you want, you have the api, you own the data :)
+
+## Final Project - Solution: Spacex App
+
+The solutions for the project can be found under the branches
+
+- `spacex-solution-1`
+- `spacex-solution-2`
+- `spacex-solution-3`
+- `spacex-solution-4`
+- `spacex-solution-5`
+- `spacex-solution-6`
+- `spacex-solution-7`