tweaks 8e

Author: mluukkai

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/8/en/part8b.md

@@ -602,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
   })
@@ -611,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

src/content/8/en/part8c.md

@@ -237,7 +237,6 @@ Every user is connected to a bunch of other persons in the system through the _f
 
 Logging in and identifying the user are handled the same way we used in [part 4](/en/part4/token_authentication) when we used REST, by using tokens. 
 
-
 Let's extend the schema like so: 
 
 ```js
@@ -276,39 +275,44 @@ The resolvers of the mutations are as follows:
 ```js
 const jwt = require('jsonwebtoken')
 
-const JWT_SECRET = 'NEED_HERE_A_SECRET_KEY'
-
 Mutation: {
   // ..
   createUser: async (root, args) => {
     const user = new User({ username: args.username })
 
     return user.save()
       .catch(error => {
-        throw new UserInputError(error.message, {
-          invalidArgs: args,
+        throw new GraphQLError('Creating the user failed', {
+          extensions: {
+            code: 'BAD_USER_INPUT',
+            invalidArgs: args.name,
+            error
+          }
         })
       })
   },
   login: async (root, args) => {
     const user = await User.findOne({ username: args.username })
 
     if ( !user || args.password !== 'secret' ) {
-      throw new UserInputError("wrong credentials")
+      throw new GraphQLError('wrong credentials', {
+        extensions: {
+          code: 'BAD_USER_INPUT'
+        }
+      })        
     }
 
     const userForToken = {
       username: user.username,
       id: user._id,
     }
 
-    return { value: jwt.sign(userForToken, JWT_SECRET) }
+    return { value: jwt.sign(userForToken, process.env.JWT_SECRET) }
   },
 },
 ```
 
-The new user mutation is straightforward. The login mutation checks if the username/password pair is valid. And if it is indeed valid, it returns a jwt token familiar from [part 4](/en/part4/token_authentication).
-
+The new user mutation is straightforward. The login mutation checks if the username/password pair is valid. And if it is indeed valid, it returns a jwt token familiar from [part 4](/en/part4/token_authentication). Note that the *JWT\_SECRET* must be defined in the  <i>.env</i> file.
 
 User creation is done now as follows:
 
@@ -342,25 +346,26 @@ In the Apollo Explorer, the header is added to a query like so:
 
 ![](../../images/8/24x.png)
 
-Let's now expand the definition of the _server_ object by adding a third parameter [context](https://www.apollographql.com/docs/apollo-server/data/data/#context-argument) to the constructor call:
+Modify the startup of the backend by giving the function that handles the startup [startStandaloneServer](https://www.apollographql.com/docs/apollo-server/api/standalone/) another parameter [context](https://www.apollographql.com /docs/apollo-server/data/context/)
 
 ```js
-const server = new ApolloServer({
-  typeDefs,
-  resolvers,
+startStandaloneServer(server, {
+  listen: { port: 4000 },
   // highlight-start
-  context: async ({ req }) => {
+  context: async ({ req, res }) => {
     const auth = req ? req.headers.authorization : null
-    if (auth && auth.toLowerCase().startsWith('bearer ')) {
+    if (auth && auth.startsWith('Bearer ')) {
       const decodedToken = jwt.verify(
-        auth.substring(7), JWT_SECRET
+        auth.substring(7), process.env.JWT_SECRET
       )
-
-      const currentUser = await User.findById(decodedToken.id).populate('friends')
+      const currentUser = await User
+        .findById(decodedToken.id).populate('friends')
       return { currentUser }
     }
-  }
+  },
   // highlight-end
+}).then(({ url }) => {
+  console.log(`Server ready at ${url}`)
 })
 ```
 
@@ -378,6 +383,9 @@ Query: {
   }
 },
 ```
+If the header has the correct value, the query returns the user information identified by the header
+
+![](../../images/8/50new.png)
 
 ### Friends list
 
@@ -389,33 +397,41 @@ _addPerson_ mutation changes like so:
 
 ```js
 Mutation: {
-  addPerson: async (root, args, context) => { // highlight-line
-    const person = new Person({ ...args })
-  // highlight-start
-    const currentUser = context.currentUser
-
-    if (!currentUser) {
-      throw new AuthenticationError("not authenticated")
-    }
-  // highlight-end
+    addPerson: async (root, args, context) => { // highlight-line
+      const person = new Person({ ...args })
+      const currentUser = context.currentUser // highlight-line
 
-    try {
-      await person.save()
-      currentUser.friends = currentUser.friends.concat(person) // highlight-line
-      await currentUser.save() // highlight-line
-    } catch (error) {
-      throw new UserInputError(error.message, {
-        invalidArgs: args,
-      })
-    }
+      // highlight-start
+      if (!currentUser) {
+        throw new GraphQLError('not authenticated', {
+          extensions: {
+            code: 'BAD_USER_INPUT',
+          }
+        })
+      }
+      // highlight-end
 
-    return person
-  },
+      try {
+        await person.save()
+        currentUser.friends = currentUser.friends.concat(person) // highlight-line
+        await currentUser.save() // highlight-line
+      } catch (error) {
+        throw new GraphQLError('Saving user failed', {
+          extensions: {
+            code: 'BAD_USER_INPUT',
+            invalidArgs: args.name,
+            error
+          }
+        })
+      }
+      
+      return person
+    },
   //...
 }
 ```
 
-If a logged-in user cannot be found from the context, an _AuthenticationError_ is thrown. Creating new persons is now done with _async/await_ syntax, because if the operation is successful, the created person is added to the friends list of the user. 
+If a logged-in user cannot be found from the context, an _GraphQLError_ with a proper message is thrown. Creating new persons is now done with _async/await_ syntax, because if the operation is successful, the created person is added to the friends list of the user. 
 
 Let's also add functionality for adding an existing user to your friends list. The mutation is as follows: 
 
@@ -436,7 +452,9 @@ And the mutation's resolver:
       currentUser.friends.map(f => f._id.toString()).includes(person._id.toString())
 
     if (!currentUser) {
-      throw new AuthenticationError("not authenticated")
+      throw new GraphQLError('wrong credentials', {
+        extensions: { code: 'BAD_USER_INPUT' }
+      }) 
     }
 
     const person = await Person.findOne({ name: args.name })

src/content/8/en/part8d.md

@@ -159,13 +159,12 @@ const App = () => {
 }
 ```
 
-The current code of the application can be found on [Github](https://github.com/fullstack-hy2020/graphql-phonebook-frontend/tree/part8-6), branch <i>part8-6</i>.
-
 ### Adding a token to a header
 
 After the backend changes, creating new persons requires that a valid user token is sent with the request. In order to send the token, we have to change the way we define the _ApolloClient_ object in <i>index.js</i> a little. 
 
 ```js
+import { ApolloClient, InMemoryCache, ApolloProvider, createHttpLink } from '@apollo/client'  // highlight-line
 import { setContext } from '@apollo/client/link/context' // highlight-line
 
 // highlight-start
@@ -174,21 +173,23 @@ const authLink = setContext((_, { headers }) => {
   return {
     headers: {
       ...headers,
-      authorization: token ? `bearer ${token}` : null,
+      authorization: token ? `Bearer ${token}` : null,
     }
   }
 })
 // highlight-end
 
-const httpLink = new HttpLink({ uri: 'http://localhost:4000' }) // highlight-line
+const httpLink = createHttpLink({
+  uri: '/graphql',
+})
 
 const client = new ApolloClient({
   cache: new InMemoryCache(),
   link: authLink.concat(httpLink) // highlight-line
 })
 ```
 
-The link parameter given to the _client_ object defines how apollo connects to the server. Here, the normal [httpLink](https://www.apollographql.com/docs/link/links/http.htm) connection is modified so that the request's <i>authorization</i> [header](https://www.apollographql.com/docs/react/networking/authentication/#header) contains the token if one has been saved to the localStorage. 
+The field _uri_ that was previously used when creating the _client_ object has been replaced by the field _link_, which defines in a more complicated case how Apollo is connected to the server. The server url is now wrapped using the function [createHttpLink](https://www.apollographql.com/docs/link/links/http.htm) into a suitable httpLink object. The link is modified by the [context](https://www .apollographql.com/docs/react/api/link/apollo-link-context/#overview) defined by the authLink object so that a possible token in localStorage is [set to header](https://www.apollographql.com/docs/react/networking/authentication /#header) <i>authorization</i> for each request to the server.
 
 Creating new persons and changing numbers works again. There is however one remaining problem. If we try to add a person without a phone number, it is not possible. 
 
@@ -217,7 +218,7 @@ const PersonForm = ({ setError }) => {
 }
 ```
 
-Current application code can be found on [Github](https://github.com/fullstack-hy2020/graphql-phonebook-frontend/tree/part8-7), branch <i>part8-7</i>.
+Current application code can be found on [Github](https://github.com/fullstack-hy2020/graphql-phonebook-frontend/tree/part8-6), branch <i>part8-6</i>.
 
 ### Updating cache, revisited
 
@@ -231,14 +232,16 @@ const PersonForm = ({ setError }) => {
   const [ createPerson ] = useMutation(CREATE_PERSON, {
     refetchQueries: [  {query: ALL_PERSONS} ], // highlight-line
     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)
     }
   })
 ```
 
 This approach is pretty good, the drawback being that the query is always rerun with any updates. 
 
-It is possible to optimize the solution by handling updating the cache ourselves. This is done by defining a suitable [update](https://www.apollographql.com/docs/react/data/mutations/#update) callback for the mutation, which Apollo runs after the mutation:
+It is possible to optimize the solution by handling updating the cache ourselves. This is done by defining a suitable [update](https://www.apollographql.com/docs/react/data/mutations/#the-update-function) callback for the mutation, which Apollo runs after the mutation:
 
 ```js 
 const PersonForm = ({ setError }) => {
@@ -276,7 +279,7 @@ Be diligent with the cache. Old data in cache can cause hard-to-find bugs. As we
 
 > <i>There are only two hard things in Computer Science: cache invalidation and naming things.</i> Read more [here](https://martinfowler.com/bliki/TwoHardThings.html).
 
-The current code of the application can be found on [Github](https://github.com/fullstack-hy2020/graphql-phonebook-frontend/tree/part8-8), branch <i>part8-8</i>.
+The current code of the application can be found on [Github](https://github.com/fullstack-hy2020/graphql-phonebook-frontend/tree/part8-7), branch <i>part8-7</i>.
 
 </div>