Update part8a

Author: vejol

src/content/8/en/part8a.md

@@ -389,19 +389,62 @@ has a resolver which returns <i>all</i> objects from the *persons* array.
 ```js
 () => persons
 ```
-  
-Start the server by running `node index.js` in the terminal.
 
 ### Apollo Studio Explorer
 
-When Apollo server is run in development mode the page [http://localhost:4000](http://localhost:4000) has a button <i>Query your server</i> that takes us to [GraphOS Studio Explorer](https://www.apollographql.com/docs/graphos/platform/explorer).  This is very useful for a developer, and can be used to make queries to the server.
+Let's add the following scripts to <i>package.json</i> to run the application:
+
+```json
+{
+  //...
+  "scripts": {
+    "start": "node index.js", // highlight-line
+    "dev": "node --watch index.js", // highlight-line
+    // ...
+  }
+}
+```
+
+When Apollo server is run in development mode the page [http://localhost:4000](http://localhost:4000) takes us to [GraphOS Studio Explorer](https://www.apollographql.com/docs/graphos/platform/explorer).  This is very useful for a developer, and can be used to make queries to the server.
 
 Let's try it out:
 
 ![apollo studio Example Query with response allPersons](../../images/8/1x.png)
 
 At the left side Explorer shows the API-documentation that it has automatically generated based on the schema.
 
+### Schema syntax highlighting in VS Code
+
+The schema in our code is defined using template literal syntax:
+
+```js
+const typeDefs = `
+  type Person {
+    name: String!
+    phone: String
+    street: String!
+    city: String! 
+    id: ID!
+  }
+
+  type Query {
+    personCount: Int!
+    allPersons: [Person!]!
+    findPerson(name: String!): Person
+  }
+`
+```
+
+The schema contains structural information, but in the code editor the whole content appears in the same color and automatic formatting tools like Prettier cannot format its contents. We can enable GraphQL schema syntax highlighting and, for example, autocompletion in VS Code by installing the [GraphQL: Language Feature Support](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql) extension.
+
+We need to somehow indicate to the extension that _typeDefs_ contains GraphQL. There are several ways to do this. We'll do it now by adding the type-indicating comment _/* GraphQL */_ before the template literal string:
+
+
+
+![VS Code uses syntax highlighting for the GraphQL schema when the comment /* GraphQL */ is added before the template literal string](../../images/8/1z.png)
+
+Now the syntax highlighting works. The comment helps the installed extension recognize the string as GraphQL and provide intelligent editor features, but it does not affect the application's runtime. Prettier can now also format the schema.
+
 ### Parameters of a resolver
 
 The query fetching a single person
@@ -511,6 +554,32 @@ type Query {
 
 so a person now has a field with the type <i>Address</i>, which contains the street and the city.
 
+Because the objects saved in the array do not have an <i>address</i> field, the default resolver is not sufficient.
+Let's add a resolver for the <i>address</i> field  of <i>Person</i> type:
+
+```js
+const resolvers = {
+  Query: {
+    personCount: () => persons.length,
+    allPersons: () => persons,
+    findPerson: (root, args) =>
+      persons.find(p => p.name === args.name)
+  },
+  // highlight-start
+  Person: {
+    address: (root) => {
+      return { 
+        street: root.street,
+        city: root.city
+      }
+    }
+  }
+  // highlight-end
+}
+```
+
+So every time a <i>Person</i> object is returned, the fields <i>name</i>, <i>phone</i> and <i>id</i> are returned using their default resolvers, but the field <i>address</i> is formed by using a self-defined resolver. The parameter *root* of the resolver function is the person-object, so the street and the city of the address can be taken from its fields.
+
 The queries requiring the address change into
 
 ```js
@@ -560,32 +629,26 @@ The person-objects saved in the server are not exactly the same as the GraphQL t
 
 Contrary to the <i>Person</i> type, the <i>Address</i> type does not have an <i>id</i> field, because they are not saved into their own separate data structure in the server.
 
-Because the objects saved in the array do not have an <i>address</i> field, the default resolver is not sufficient.
-Let's add a resolver for the <i>address</i> field  of <i>Person</i> type :
+Let's modify the resolver for the _address_ field so that it destructures the needed fields from the parameter it receives:
 
 ```js
 const resolvers = {
   Query: {
     personCount: () => persons.length,
     allPersons: () => persons,
-    findPerson: (root, args) =>
-      persons.find(p => p.name === args.name)
+    findPerson: (root, args) => persons.find((p) => p.name === args.name),
   },
-  // highlight-start
   Person: {
-    address: (root) => {
-      return { 
-        street: root.street,
-        city: root.city
+    address: ({ street, city }) => { // highlight-line
+      return {
+        street, // highlight-line
+        city, // highlight-line
       }
-    }
-  }
-  // highlight-end
+    },
+  },
 }
 ```
 
-So every time a <i>Person</i> object is returned, the fields <i>name</i>, <i>phone</i> and <i>id</i> are returned using their default resolvers, but the field <i>address</i> is formed by using a self-defined resolver. The parameter *root* of the resolver function is the person-object, so the street and the city of the address can be taken from its fields.
-
 The current code of the application can be found on [Github](https://github.com/fullstack-hy2020/graphql-phonebook-backend/tree/part8-1), branch <i>part8-1</i>.
 
 ### Mutations
@@ -610,20 +673,29 @@ The Mutation is given the details of the person as parameters. The parameter <i>
 Mutations also require a resolver:
 
 ```js
-const { v1: uuid } = require('uuid')
+const { v1: uuid } = require('uuid') // highlight-line
 
 // ...
 
 const resolvers = {
-  // ...
+  Query: {
+    // ...
+  },
+  Person: {
+    // ...
+  },
+  // highlight-start
   Mutation: {
     addPerson: (root, args) => {
       const person = { ...args, id: uuid() }
       persons = persons.concat(person)
       return person
     }
   }
+  // highlight-end
 }
+
+// ...
 ```
 
 The mutation adds the object given to it as a parameter *args* to the array *persons*, and returns the object it added to the array.
@@ -642,7 +714,7 @@ mutation {
   ) {
     name
     phone
-    address{
+    address {
       city
       street
     }

src/content/8/fi/osa8a.md

@@ -236,7 +236,7 @@ Kuten huomaamme, GraphQL-kyselyn ja siihen vastauksena tulevan JSON:in muodoilla
 
 GraphQL:n skeema kuvaa ainoastaan palvelimen ja sitä käyttävien clientien välillä liikkuvan tiedon muodon. Tieto voi olla organisoituna ja talletettuna palvelimeen ihan missä muodossa tahansa.
 
-Nimestään huolimatta GraphQL:llä ei itse asiassa ole mitään tekemistä tietokantojen kanssa, se ei ota mitään kantaa siihen miten data on tallennettu. GraphQL-periaattella toimivan API:n käyttämä data voi siis olla talletettu relaatiotietokantaan, dokumenttitietokantaan tai muille palvelimille, joita GraphQL-palvelin käyttää vaikkapa REST:in välityksellä.
+Nimestään huolimatta GraphQL:llä ei itse asiassa ole mitään tekemistä tietokantojen kanssa, se ei ota mitään kantaa siihen miten data on tallennettu. GraphQL-periaatteella toimivan API:n käyttämä data voi siis olla talletettu relaatiotietokantaan, dokumenttitietokantaan tai muille palvelimille, joita GraphQL-palvelin käyttää vaikkapa REST:in välityksellä.
 
 ### Apollo Server
 
@@ -248,7 +248,7 @@ Luodaan uusi npm-projekti komennolla _npm init_ ja asennetaan tarvittavat riippu
 npm install @apollo/server graphql
 ```
 
-Alustava toteutus on seuraavassa
+Alustava toteutus kirjoitettuna tiedostoon <i>index.js</i> on seuraavassa
 
 ```js
 const { ApolloServer } = require('@apollo/server')
@@ -386,14 +386,59 @@ resolveri on funktio, joka palauttaa <i>kaikki</i> taulukon _persons_ oliot
 
 ### Apollo Studio Explorer
 
-Kun Apollo-serveriä suoritetaan sovelluskehitysmoodissa, ja mennään sivulle  [http://localhost:4000](http://localhost:4000) päästään nappia <i>Query your server</i> painamalla  sovelluskehittäjälle erittäin hyödyllisen [Apollo Studio Explorer](https://www.apollographql.com/docs/studio/explorer/explorer/)-näkymän, joka avulla on mahdollista tehdä kyselyjä palvelimelle.
+Lisätään tiedostoon <i>package.json</i> skriptit sovelluksen suoritusta varten:
+
+```json
+{
+  //...
+  "scripts": {
+    "start": "node index.js", // highlight-line
+    "dev": "node --watch index.js", // highlight-line
+    // ...
+  }
+}
+```
+
+Kun Apollo-serveriä suoritetaan sovelluskehitysmoodissa ja mennään sivulle  [http://localhost:4000](http://localhost:4000), päästään sovelluskehittäjälle erittäin hyödylliseen [Apollo Studio Explorer](https://www.apollographql.com/docs/studio/explorer/explorer/)-näkymään, jonka avulla on mahdollista tehdä kyselyjä palvelimelle.
 
 Kokeillaan 
 
 ![](../../images/8/1x.png)
 
 Vasemmassa laidassa Explorer näyttää mukavasti myös automaattisesti skeeman perusteella muodosteutun API-dokumentaation.
 
+### Skeeman syntaksikorostus VS Codessa
+
+Skeema on määritelty koodissamme template literal -syntaksin avulla: 
+
+```js
+const typeDefs = `
+  type Person {
+    name: String!
+    phone: String
+    street: String!
+    city: String! 
+    id: ID!
+  }
+
+  type Query {
+    personCount: Int!
+    allPersons: [Person!]!
+    findPerson(name: String!): Person
+  }
+`
+```
+
+Skeema sisältää rakenteellista tietoa, mutta koodieditorissa koko sisältö näkyy samanvärisenä, eivätkä esimerkiksi automaattiset muotoilutyökalut kuten Prettier osaa muotoilla sen sisältöä. Saamme VS Codeen GraphQL-skeeman syntaksikorostuksen ja esimerkiksi automaattisen täydennyksen käyttöön asentamalla [GraphQL: Language Feature Support](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql) -lisäosan.
+
+Lisäosalle pitää vielä jotenkin ilmaista, että _typeDefs_ sisältää GraphQL:ää. Tähän on useita tapoja. Tehdään se nyt lisäämällä template literal -merkkijonon eteen tyypin määrittävä kommentti _/* GraphQL */_:
+
+
+
+![VS Code käyttää syntaksikorostusta GraphQL-skeemaan, kun template literal -merkkijonon eteen on lisätty kommentti /* GraphQL */](../../images/8/1z.png)
+
+Nyt syntaksikorostus toimii. Kommentti auttaa asentamaamme lisäosaa tunnistamaan merkkijonon GraphQL:ksi ja tarjoamaan älykkäitä ominaisuuksia editorissa, mutta ei vaikuta itse sovelluksen suoritukseen. Myös Prettier osaa nyt muotoilla skeemaa.
+
 ### Resolverin parametrit
 
 Yksittäisen henkilön hakevan kyselyn
@@ -500,6 +545,31 @@ type Query {
 
 eli henkilöllä on nyt kenttä, jonka tyyppi on <i>Address</i>, joka koostuu kadusta ja kaupungista. 
 
+Koska taulukkoon talletetuilla olioilla ei ole kenttää <i>address</i>, oletusarvoinen resolveri ei enää riitä. Lisätään resolveri tyypin <i>Person</i> kentälle <i>address</i>:
+
+```js
+const resolvers = {
+  Query: {
+    personCount: () => persons.length,
+    allPersons: () => persons,
+    findPerson: (root, args) =>
+      persons.find(p => p.name === args.name)
+  },
+  // highlight-start
+  Person: {
+    address: (root) => {
+      return { 
+        street: root.street,
+        city: root.city
+      }
+    }
+  }
+  // highlight-end
+}
+```
+
+Eli aina palautettaessa <i>Person</i>-oliota, palautetaan niiden kentät <i>name</i>, <i>phone</i> sekä <i>id</i> käyttäen oletusarvoista resolveria, kenttä <i>address</i> muodostetaan itse määritellyn resolverin avulla. Resolverifunktion parametrina _root_ on käsittelyssä oleva henkilö-olio, eli osoitteen katu ja kaupunki saadaan sen kentistä.
+
 Osoitetta tarvitsevat kyselyt muuttuvat muotoon
 
 ```js
@@ -549,31 +619,6 @@ Nyt siis palvelimen tallettamat henkilö-oliot eivät ole muodoltaan täysin sam
 
 Toisin kuin tyypille <i>Person</i> ei tyypille <i>Address</i> ole määritelty <i>id</i>-kenttää, sillä osoitteita ei ole talletettu palvelimella omaan tietorakenteeseensa.
 
-Koska taulukkoon talletetuilla olioilla ei ole kenttää <i>address</i> oletusarvoinen resolveri ei enää riitä. Lisätään resolveri tyypin <i>Person</i> kentälle <i>address</i>:
-
-```js
-const resolvers = {
-  Query: {
-    personCount: () => persons.length,
-    allPersons: () => persons,
-    findPerson: (root, args) =>
-      persons.find(p => p.name === args.name)
-  },
-  // highlight-start
-  Person: {
-    address: (root) => {
-      return { 
-        street: root.street,
-        city: root.city
-      }
-    }
-  }
-  // highlight-end
-}
-```
-
-Eli aina palautettaessa <i>Person</i>-oliota, palautetaan niiden kentät <i>name</i>, <i>phone</i> sekä <i>id</i> käyttäen oletusarvoista resolveria, kenttä <i>address</i> muodostetaan itse määritellyn resolverin avulla. Resolverifunktion parametrina _root_ on käsittelyssä oleva henkilö-olio, eli osoitteen katu ja kaupunki saadaan sen kentistä.
-
 Muutetaan kentän _address_ resolveria vielä siten, että se destrukturoi tarvitsemansa kentät saamastaan parametrista:
 
 ```js
@@ -618,20 +663,29 @@ Mutaatio siis saa parametreina käyttäjän tiedot. Parametreista <i>phone</i> o
 Myös mutaatioita varten on määriteltävä resolveri:
 
 ```js
-const { v1: uuid } = require('uuid')
+const { v1: uuid } = require('uuid') // highlight-line
 
 // ...
 
 const resolvers = {
-  // ...
+  Query: {
+    // ...
+  },
+  Person: {
+    // ...
+  },
+  // highlight-start
   Mutation: {
     addPerson: (root, args) => {
       const person = { ...args, id: uuid() }
       persons = persons.concat(person)
       return person
     }
   }
+  // highlight-end
 }
+
+// ...
 ```
 
 Mutaatio siis lisää parametreina _args_ saamansa olion taulukkoon _persons_ ja palauttaa lisätyn olion. 
@@ -650,7 +704,7 @@ mutation {
   ) {
     name
     phone
-    address{
+    address {
       city
       street
     }