Merge branch 'fullstack-hy2020:source' into source

Author: Celqaz

src/content/0/en/part0a.md

@@ -17,6 +17,8 @@ Participants are expected to have good programming skills, basic knowledge of we
 
 Previous knowledge of JavaScript or other course topics is not required.
 
+How much programming experience is needed? It is hard to say, but you should be pretty fluent with <i>your</i> language. This level of fluency takes usually at least 100-200 of hours practice to develop.
+
 ### Course material
 
 The course material is meant to be read one part at a time and in order.

src/content/13/fi/osa13b.md

@@ -981,7 +981,7 @@ Sovelluksen tämänhetkinen koodi on kokonaisuudessaan [GitHubissa](https://gith
 #### Tehtävä 13.13.
 
 Toteuta sovellukseen kaikki blogit palauttavaan reittiin filtteröinti hakusanan perusteella. Filtteröinti toimii seuraavasti
-- _GET /api/blogs?serch=react_ palauttaa ne blogit joiden kentässä <i>title</i> esiintyy hakusana <i>react</i>, hakusana on epäcasesensitiivinen
+- _GET /api/blogs?search=react_ palauttaa ne blogit joiden kentässä <i>title</i> esiintyy hakusana <i>react</i>, hakusana on epäcasesensitiivinen
 - _GET /api/blogs_ palauttaa kaikki blogit
 
 
@@ -990,7 +990,7 @@ Toteuta sovellukseen kaikki blogit palauttavaan reittiin filtteröinti hakusanan
 
 Laajenna filtteriä siten, että se etsii hakusanaa kentistä <i>title</i> ja <i>author</i>, eli
 
-_GET /api/blogs?serch=jami_ palauttaa ne blogit joiden kentässä <i>title</i> tai kentässä <i>author</i> esiintyy hakusana <i>jami</i>
+_GET /api/blogs?search=jami_ palauttaa ne blogit joiden kentässä <i>title</i> tai kentässä <i>author</i> esiintyy hakusana <i>jami</i>
 #### Tehtävä 13.15.
 
 Muokkaa blogien reittiä siten, että se palauttaa blogit tykkäysten perusteella laskevassa järjestyksessä. Etsi [dokumentaatiosta](https://sequelize.org/master/manual/model-querying-basics.html) ohjeet järjestämiselle.

src/content/2/fi/osa2d.md

@@ -694,7 +694,7 @@ Sovelluksen tämänhetkinen koodi on kokonaisuudessaan [GitHubissa](https://gith
 
 On taas tehtävien aika. Tehtävien haastavuus alkaa nousta, sillä koodin toimivuuteen vaikuttaa myös se, kommunikoiko React-koodi oikein JSON Serverin kanssa.
 
-Meidän onkin syytä päivittää websovelluskehittäjän vala <i>Full stack -sovelluskehittäjän valaksi</i>, eli muistuttaa itseämme siitä, että frontendin koodin lisäksi seuraamme koko ajan sitä, miten fronend ja backend kommunikoivat.
+Meidän onkin syytä päivittää websovelluskehittäjän vala <i>Full stack -sovelluskehittäjän valaksi</i>, eli muistuttaa itseämme siitä, että frontendin koodin lisäksi seuraamme koko ajan sitä, miten frontend ja backend kommunikoivat.
 
 Full stack -ohjelmointi on <i>todella</i> hankalaa, ja sen takia lupaan hyödyntää kaikkia ohjelmointia helpottavia keinoja:
 

src/content/6/en/part6a.md

@@ -7,7 +7,7 @@ lang: en
 
 <div class="content">
 
-So far, we have followed the state management conventions recommended by React. We have placed the state and the functions for handling it in [higher level](https://reactjs.org/docs/lifting-state-up.html) of the component structyre of the application. Quite often most of the app state and state altering functions reside rirectly in the root component. The state and its handler methods have then been passed to other components with props. This works up to a certain point, but when applications grow larger, state management becomes challenging. 
+So far, we have followed the state management conventions recommended by React. We have placed the state and the functions for handling it in [higher level](https://reactjs.org/docs/lifting-state-up.html) of the component structure of the application. Quite often most of the app state and state altering functions reside directly in the root component. The state and its handler methods have then been passed to other components with props. This works up to a certain point, but when applications grow larger, state management becomes challenging. 
 
 ### Flux-architecture
 

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(
@@ -607,7 +602,9 @@ const PersonForm = ({ setError }) => {
     refetchQueries: [  {query: ALL_PERSONS } ],
     // highlight-start
     onError: (error) => {
-      setError(error.graphQLErrors[0].message)
+      const errors = error.graphQLErrors[0].extensions.error.errors
+      const messages = Object.values(errors).map(e => e.message).join('\n')
+      setError(messages)
     }
     // highlight-end
   })
@@ -616,7 +613,8 @@ const PersonForm = ({ setError }) => {
 }
 ```
 
-<!-- Renderöidään mahdollinen virheilmoitus näytölle -->
+We have to dig quite deep to the error object until we find the proper error messages...
+
 We can then render the error message on the screen as necessary:
 
 ```js
@@ -750,8 +748,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 +816,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