tweaks 8ab

Author: mluukkai

src/content/8/en/part8a.md

@@ -250,17 +250,17 @@ Let's implement a GraphQL server with today's leading library: [Apollo Server](h
 Create a new npm project with _npm init_ and install the required dependencies.
 
 ```bash
-npm install apollo-server@3.10.1 graphql
+npm install @apollo/server graphql
 ```
 
-**Note** at the time of writing (10th Dec 2022) the code used in this part is not fully compatible with the new version of the Apollo Server, and because of this, if you want everything to work smoothly you should install the version _3.10.1_. Material shall be updated to use the most recent Apollo Server in early 2023.
 
 Also create a `index.js` file in your project's root directory.
 
 The initial code is as follows: 
 
 ```js
-const { ApolloServer, gql } = require('@apollo/server')
+const { ApolloServer } = require('@apollo/server')
+const { startStandaloneServer } = require('@apollo/server/standalone')
 
 let persons = [
   {
@@ -285,7 +285,7 @@ let persons = [
   },
 ]
 
-const typeDefs = gql`
+const typeDefs = `
   type Person {
     name: String!
     phone: String
@@ -315,12 +315,14 @@ const server = new ApolloServer({
   resolvers,
 })
 
-server.listen().then(({ url }) => {
+startStandaloneServer(server, {
+  listen: { port: 4000 },
+}).then(({ url }) => {
   console.log(`Server ready at ${url}`)
 })
 ```
 
-The heart of the code is an _ApolloServer_, which is given two parameters:
+The heart of the code is an [ApolloServer](https://www.apollographql.com/docs/apollo-server/api/apollo-server/), which is given two parameters:
 
 ```js
 const server = new ApolloServer({
@@ -331,7 +333,7 @@ const server = new ApolloServer({
 
 The first parameter, _typeDefs_, contains the GraphQL schema. 
 
-The second parameter is an object, which contains the [resolvers](https://www.apollographql.com/tutorials/fullstack-quickstart/04-writing-query-resolvers) of the server. These are the code, which defines <i>how</i> GraphQL queries are responded to. 
+The second parameter is an object, which contains the [resolvers](https://www.apollographql.com/docs/apollo-server/data/resolvers/) of the server. These are the code, which defines <i>how</i> GraphQL queries are responded to. 
 
 The code of the resolvers is the following: 
 
@@ -426,13 +428,10 @@ The second parameter, _args_, contains the parameters of the query.
 The resolver then returns from the array _persons_ the person whose name is the same as the value of <i>args.name</i>. 
 The resolver does not need the first parameter _root_.
 
-
- 
- In fact, all resolver functions are given [four parameters](https://www.graphql-tools.com/docs/resolvers#resolver-function-signature). With JavaScript, the parameters don't have to be defined if they are not needed. We will be using the first and the third parameter of a resolver later in this part. 
+In fact, all resolver functions are given [four parameters](https://www.graphql-tools.com/docs/resolvers#resolver-function-signature). With JavaScript, the parameters don't have to be defined if they are not needed. We will be using the first and the third parameter of a resolver later in this part. 
 
 ### The default resolver
 
-
 When we do a query, for example
 
 ```js
@@ -453,7 +452,6 @@ We have so far only defined resolvers for fields of the type <i>Query</i>, so fo
 Because we did not define resolvers for the fields of the type <i>Person</i>, Apollo has defined [default resolvers](https://www.graphql-tools.com/docs/resolvers/#default-resolver) for them. 
 They work like the one shown below: 
 
-
 ```js
 const resolvers = {
   Query: {
@@ -473,13 +471,10 @@ const resolvers = {
 }
 ```
 
-
 The default resolver returns the value of the corresponding field of the object. The object itself can be accessed through the first parameter of the resolver, _root_.
 
-
 If the functionality of the default resolver is enough, you don't need to define your own. It is also possible to define resolvers for only some fields of a type, and let the default resolvers handle the rest. 
 
-
 We could for example define that the address of all persons is 
 <i>Manhattan New York</i> by hard-coding the following to the resolvers of the street and city fields of the type <i>Person</i>:
 
@@ -516,10 +511,8 @@ type Query {
 }
 ```
 
-
 so a person now has a field with the type <i>Address</i>, which contains the street and the city. 
 
-
 The queries requiring the address change into
 
 ```js
@@ -565,7 +558,6 @@ let persons = [
 ]
 ```
 
-
 The person-objects saved in the server are not exactly the same as the GraphQL type <i>Person</i> objects described in the schema. 
 
 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. 
@@ -615,10 +607,8 @@ type Mutation {
 }
 ```
 
-
 The Mutation is given the details of the person as parameters. The parameter <i>phone</i> is the only one which is nullable. The Mutation also has a return value. The return value is type <i>Person</i>, the idea being that the details of the added person are returned if the operation is successful and if not, null. Value for the field <i>id</i> is not given as a parameter. Generating an id is better left for the server. 
 
-
 Mutations also require a resolver: 
 
 ```js
@@ -707,14 +697,13 @@ If we try to create a new person, but the parameters do not correspond with the
 
 So some of the error handling can be automatically done with GraphQL [validation](https://graphql.org/learn/validation/).
 
-However, GraphQL cannot handle everything automatically. For example, stricter rules for data sent to a Mutation have to be added manually.
-The errors from those rules are handled by [the error handling mechanism of Apollo Server](https://www.apollographql.com/docs/apollo-server/data/errors).
+However, GraphQL cannot handle everything automatically. For example, stricter rules for data sent to a Mutation have to be added manually. An error could be handeled by throwing [GraphQLError](https://www.apollographql.com/docs/apollo-server/data/errors/#custom-errors) with a proper 
+[error code](https://www.apollographql.com/docs/apollo-server/data/errors/#built-in-error-codes).
 
-
-Let's block adding the same name to the phonebook multiple times: 
+Let's prevent adding the same name to the phonebook multiple times: 
 
 ```js
-const { ApolloServer, UserInputError, gql } = require('@apollo/server') // highlight-line
+const { GraphQLError } = require('graphql') // highlight-line
 
 // ...
 
@@ -724,8 +713,11 @@ const resolvers = {
     addPerson: (root, args) => {
       // highlight-start
       if (persons.find(p => p.name === args.name)) {
-        throw new UserInputError('Name must be unique', {
-          invalidArgs: args.name,
+        throw new GraphQLError('Name must be unique', {
+          extensions: {
+            code: 'BAD_USER_INPUT',
+            invalidArgs: args.name
+          }
         })
       }
       // highlight-end
@@ -739,9 +731,9 @@ const resolvers = {
 ```
 
 
-So if the name to be added already exists in the phonebook, throw _UserInputError_ error. 
+So if the name to be added already exists in the phonebook, throw _GraphQLError_ error. 
 
-![](../../images/8/6x.png)
+![](../../images/8/6new.png)
 
 The current code of the application can be found on [GitHub](https://github.com/fullstack-hy2020/graphql-phonebook-backend/tree/part8-2), branch <i>part8-2</i>.
 
@@ -933,12 +925,6 @@ In some cases, it might be beneficial to name the queries. This is the case espe
 Through the exercises, we will implement a GraphQL backend for a small library. 
 Start with [this file](https://github.com/fullstack-hy2020/misc/blob/master/library-backend.js). Remember to _npm init_ and to install dependencies!
 
-**Note** at the time of writing (10th Dec 2022) the code used in this part is not fully compatible with the new version of the Apollo Server, and because of this, if you want everything to work smoothly you should install the version _3.10.1_:
-
-```bash
-npm install [email protected] graphql
-```
-
 Note also that the code does not initially work since the schema definition is not complete.
 
 #### 8.1: The number of books and authors

src/content/8/en/part8b.md

@@ -35,13 +35,11 @@ We'll start with the following code for our application:
 import ReactDOM from 'react-dom/client'
 import App from './App'
 
-import { ApolloClient, HttpLink, InMemoryCache, gql } from '@apollo/client'
+import { ApolloClient, InMemoryCache, gql } from '@apollo/client'
 
 const client = new ApolloClient({
+  uri: 'http://localhost:4000',
   cache: new InMemoryCache(),
-  link: new HttpLink({
-    uri: 'http://localhost:4000',
-  })
 })
 
 const query = gql`
@@ -89,15 +87,12 @@ import App from './App'
 import {
   ApolloClient,
   ApolloProvider, // highlight-line
-  HttpLink,
   InMemoryCache,
 } from '@apollo/client'
 
 const client = new ApolloClient({
+  uri: 'http://localhost:4000',
   cache: new InMemoryCache(),
-  link: new HttpLink({
-    uri: 'http://localhost:4000',
-  }),
 })
 
 ReactDOM.createRoot(document.getElementById('root')).render(
@@ -750,8 +745,6 @@ It looks bleak, but it works:
 Surprisingly, when a person's number is changed, the new number automatically appears on the list of persons rendered by the <i>Persons</i> component. 
 This happens because each person has an identifying field of type <i>ID</i>, so the person's details saved to the cache update automatically when they are changed with the mutation. 
 
-The current code of the application can be found on [GitHub](https://github.com/fullstack-hy2020/graphql-phonebook-frontend/tree/part8-4) branch <i>part8-4</i>.
-
 Our application still has one small flaw. If we try to change the phone number for a name which does not exist, nothing seems to happen. 
 This happens because if a person with the given name cannot be found, 
 the mutation response is <i>null</i>:
@@ -820,7 +813,7 @@ useEffect(() => {
 
 However, this solution does not work if the _notify_ function is not wrapped to a [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) function.  If it's not, this results in an endless loop. When the _App_ component is rerendered after a notification is removed, a <i>new version</i> of _notify_ gets created which causes the effect function to be executed, which causes a new notification, and so on, and so on...
 
-The current code of the application can be found on [GitHub](https://github.com/fullstack-hy2020/graphql-phonebook-frontend/tree/part8-5) branch <i>part8-5</i>.
+The current code of the application can be found on [GitHub](https://github.com/fullstack-hy2020/graphql-phonebook-frontend/tree/part8-4) branch <i>part8-4</i>.
 
 ### Apollo Client and the applications state
 

src/content/8/fi/osa8a.md

@@ -245,15 +245,14 @@ Toteutetaan nyt GraphQL-palvelin tämän hetken johtavaa kirjastoa [Apollo Serve
 Luodaan uusi npm-projekti komennolla _npm init_ ja asennetaan tarvittavat riippuvuudet
 
 ```bash
-npm install apollo-server@3.10.1 graphql
+npm install @apollo/server graphql
 ```
 
-**Huom:** tätä kirjoittaessa (10.12.2022) tämän osan koodi ei ole täysin yhteensopivaa uusimman Apollo Serverin version kanssa. Tämän takia kannattaa asentaa versio _3.10.1_ jos haluat että koodi toimii sellaisenaan. Osa päivitetään vuoden 2023 alkupuolella.
-
 Alustava toteutus on seuraavassa
 
 ```js
-const { ApolloServer, gql } = require('apollo-server')
+const { ApolloServer } = require('@apollo/server')
+const { startStandaloneServer } = require('@apollo/server/standalone')
 
 let persons = [
   {
@@ -278,7 +277,7 @@ let persons = [
   },
 ]
 
-const typeDefs = gql`
+const typeDefs = `
   type Person {
     name: String!
     phone: String
@@ -308,12 +307,14 @@ const server = new ApolloServer({
   resolvers,
 })
 
-server.listen().then(({ url }) => {
+startStandaloneServer(server, {
+  listen: { port: 4000 },
+}).then(({ url }) => {
   console.log(`Server ready at ${url}`)
 })
 ```
 
-Toteutuksen ytimessä on _ApolloServer_, joka saa kaksi parametria 
+Toteutuksen ytimessä on [ApolloServer](https://www.apollographql.com/docs/apollo-server/api/apollo-server/), joka saa kaksi parametria 
 
 ```js
 const server = new ApolloServer({
@@ -324,7 +325,7 @@ const server = new ApolloServer({
 
 parametreista ensimmäinen _typeDefs_ sisältää sovelluksen käyttämän GraphQL-skeeman. 
 
-Toinen parametri on olio, joka sisältää palvelimen [resolverit](https://www.apollographql.com/docs/apollo-server/data/data/#resolver-map), eli käytännössä koodin, joka määrittelee <i>miten</i> GraphQL-kyselyihin vastataan.
+Toinen parametri on olio, joka sisältää palvelimen [resolverit](https://www.apollographql.com/docs/apollo-server/data/resolvers/), eli käytännössä koodin, joka määrittelee <i>miten</i> GraphQL-kyselyihin vastataan.
 
 Resolverien koodi on seuraavassa:
 
@@ -698,12 +699,12 @@ Jos yritämme luoda uuden henkilön, mutta parametrit eivät vastaa skeemassa m
 
 GraphQL:n [validoinnin](https://graphql.org/learn/validation/) avulla pystytään siis jo automaattisesti hoitamaan osa virheenkäsittelyä. 
 
-Kaikkea GraphQL ei kuitenkaan pysty hoitamaan automaattisesti. Esimerkiksi tarkemmat säännöt mutaatiolla lisättävän datan kenttien muodolle on lisättävä itse. Niistä aiheutuvat virheet tulee hoitaa [GraphQL:n poikkeuskäsittelymekanismilla](https://www.apollographql.com/docs/apollo-server/data/errors/).
+Kaikkea GraphQL ei kuitenkaan pysty hoitamaan automaattisesti. Esimerkiksi tarkemmat säännöt mutaatiolla lisättävän datan kenttien muodolle on lisättävä itse. Niistä aiheutuvat virheet tulee hoitaa itse heittämällä sopivalla [virhekoodilla](https://www.apollographql.com/docs/apollo-server/data/errors/#built-in-error-codes) varustetu [GraphQLError](https://www.apollographql.com/docs/apollo-server/data/errors/#custom-errors).
 
 Estetään saman nimen lisääminen puhelinluetteloon useampaan kertaan:
 
 ```js
-const { ApolloServer, UserInputError, gql } = require('apollo-server') // highlight-line
+const { GraphQLError } = require('graphql') // highlight-line
 
 // ...
 
@@ -713,8 +714,11 @@ const resolvers = {
     addPerson: (root, args) => {
       // highlight-start
       if (persons.find(p => p.name === args.name)) {
-        throw new UserInputError('Name must be unique', {
-          invalidArgs: args.name,
+        throw new GraphQLError('Name must be unique', {
+          extensions: {
+            code: 'BAD_USER_INPUT',
+            invalidArgs: args.name
+          }
         })
       }
       // highlight-end
@@ -727,9 +731,9 @@ const resolvers = {
 }
 ```
 
-Eli jos lisättävä nimi on jo luettelossa heitetään poikkeus _UserInputError_.
+Eli jos lisättävä nimi on jo luettelossa heitetään poikkeus _GraphQLError_.
 
-![](../../images/8/6x.png)
+![](../../images/8/6new.png)
 
 Sovelluksen tämänhetkinen koodi on kokonaisuudessaan [GitHubissa](https://github.com/fullstack-hy2020/graphql-phonebook-backend/tree/part8-2), branchissa <i>part8-2</i>.
 
@@ -921,13 +925,6 @@ Tehtävissä toteutetaan yksinkertaisen kirjaston GraphQL:ää tarjoava backend.
 
 Huomaa, että koodin käynnistäminen aiheuttaa alussa virheen, sillä skeeman määrittely on puutteellinen.
 
-**Huom:** tätä kirjoittaessa (10.12.2022) tämän osan koodi ei ole täysin yhteensopivaa uusimman Apollo Serverin version kanssa. Tämän takia kannattaa asentaa versio _3.10.1_ jos haluat että koodi toimii sellaisenaan. Osa päivitetään vuoden 2023 alkupuolella.
-
-Asenna siis riippuvuudet seuraavasti:
-
-```bash
-npm install [email protected] graphql
-```
 #### 8.1: kirjojen ja kirjailijoiden määrä
 
 Toteuta kyselyt _bookCount_ ja _authorCount_ jotka palauttavat kirjojen ja kirjailijoiden lukumäärän.