part8e betterment

Author: mluukkai

src/content/8/en/part8e.md

@@ -360,13 +360,15 @@ and the file <i>index.js</i> changes to:
 
 ```js
 const { ApolloServer } = require('@apollo/server')
+// highlight-start
 const { expressMiddleware } = require('@apollo/server/express4')
 const { ApolloServerPluginDrainHttpServer } = require('@apollo/server/plugin/drainHttpServer')
 const { makeExecutableSchema } = require('@graphql-tools/schema')
 const express = require('express')
 const cors = require('cors')
 const bodyParser = require('body-parser')
 const http = require('http')
+// highlight-end
 
 const jwt = require('jsonwebtoken')
 
@@ -398,8 +400,7 @@ const start = async () => {
   const httpServer = http.createServer(app)
 
   const server = new ApolloServer({
-    typeDefs,
-    resolvers,
+    schema: makeExecutableSchema({ typeDefs, resolvers }),
     plugins: [ApolloServerPluginDrainHttpServer({ httpServer })],
   })
 
@@ -461,14 +462,13 @@ So when a new person is added, all of its details are sent to all subscribers.
 First, we have to install two packages for adding subscriptions to GraphQL and a Node.js WebSocket library:
 
 ```
-npm install graphql-subscriptions ws graphql-ws
+npm install graphql-ws ws @graphql-tools/schema
 ```
 
 The file <i>index.js</i> is changed to
 
 ```js
 // highlight-start
-const { execute, subscribe } = require('graphql')
 const { WebSocketServer } = require('ws')
 const { useServer } = require('graphql-ws/lib/use/ws')
 // highlight-end
@@ -479,39 +479,30 @@ const start = async () => {
   const app = express()
   const httpServer = http.createServer(app)
 
-  const schema = makeExecutableSchema({ typeDefs, resolvers })
-
-// highlight-start
+  // highlight-start
   const wsServer = new WebSocketServer({
     server: httpServer,
     path: '/',
   })
-
-  const serverCleanup = useServer({ schema }, wsServer)
+  // highlight-end
+  
+  // highlight-start
+  const schema = makeExecutableSchema({ typeDefs, resolvers })
+  const serverCleanup = useServer({ schema }, wsServer);
   // highlight-end
 
   const server = new ApolloServer({
     schema,
-    context: async ({ req }) => {
-      const auth = req ? req.headers.authorization : null
-      if (auth && auth.toLowerCase().startsWith('bearer ')) {
-        const decodedToken = jwt.verify(auth.substring(7), JWT_SECRET)
-        const currentUser = await User.findById(decodedToken.id).populate(
-          'friends'
-        )
-        return { currentUser }
-      }
-    },
     plugins: [
       ApolloServerPluginDrainHttpServer({ httpServer }),
       // highlight-start
       {
         async serverWillStart() {
           return {
             async drainServer() {
-              await serverCleanup.dispose()
+              await serverCleanup.dispose();
             },
-          }
+          };
         },
       },
       // highlight-end
@@ -520,10 +511,23 @@ const start = async () => {
 
   await server.start()
 
-  server.applyMiddleware({
-    app,
-    path: '/',
-  })
+  app.use(
+    '/',
+    cors(),
+    express.json(),
+    expressMiddleware(server, {
+      context: async ({ req }) => {
+        const auth = req ? req.headers.authorization : null
+        if (auth && auth.startsWith('Bearer ')) {
+          const decodedToken = jwt.verify(auth.substring(7), process.env.JWT_SECRET)
+          const currentUser = await User.findById(decodedToken.id).populate(
+            'friends'
+          )
+          return { currentUser }
+        }
+      },
+    }),
+  )
 
   const PORT = 4000
 
@@ -535,18 +539,17 @@ const start = async () => {
 start()
 ```
 
-
 When queries and mutations are used, GraphQL uses the HTTP protocol in the communication. In case of subscriptions, the communication between client and server happens with [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API).
 
 The above code registers a WebSocketServer object to listen the WebSocket connections, besides the usual HTTP connections that the server listens. The second part of the definition registers a function that closes the WebSocket connection on server shutdown.
+If you're interested in more details about configurations, Apollo's [documentation](https://www.apollographql.com/docs/apollo-server/data/subscriptions) explains in relative detail what each line of code does.
 
 WebSockets are a perfect match for communication in the case of GraphQL subscriptions since when WebSockets are used, also the server can initiate the communication.
 
 The subscription _personAdded_ needs a resolver. The _addPerson_ resolver also has to be modified so that it sends a notification to subscribers. 
 
 The required changes are as follows:
 
-
 ```js
 // highlight-start
 const { PubSub } = require('graphql-subscriptions')
@@ -563,16 +566,24 @@ const resolvers = {
       const currentUser = context.currentUser
 
       if (!currentUser) {
-        throw new AuthenticationError("not authenticated")
+        throw new GraphQLError('not authenticated', {
+          extensions: {
+            code: 'BAD_USER_INPUT',
+          }
+        })
       }
 
       try {
         await person.save()
         currentUser.friends = currentUser.friends.concat(person)
         await currentUser.save()
       } catch (error) {
-        throw new UserInputError(error.message, {
-          invalidArgs: args,
+        throw new GraphQLError('Saving user failed', {
+          extensions: {
+            code: 'BAD_USER_INPUT',
+            invalidArgs: args.name,
+            error
+          }
         })
       }
 
@@ -591,9 +602,13 @@ const resolvers = {
 }
 ```
 
+The following library needs to be installed
 
+```
+npm install graphql-subscriptions
+```
 
-With subscriptions, the communication happens using the [publish-subscribe](https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern) principle utilizing the object [PubSub](https://www.apollographql.com/docs/apollo-server/data/subscriptions/#the-pubsub-class).
+With subscriptions, the communication happens using the [publish-subscribe](https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern) principle utilizing the object [PubSub](https://www.apollographql.com/docs/apollo-server/data/subscriptions#the-pubsub-class).
 
 There is only few lines of code added, but quite much is happening under the hood. The resolver of the _personAdded_ subscription registers and saves info about all the clients that do the subscription. The clients are saved to an 
 ["iterator object"](https://www.apollographql.com/docs/apollo-server/data/subscriptions/#listening-for-events) called <i>PERSON\_ADDED</i>  thanks to the following code:
@@ -628,14 +643,16 @@ If the subscription does not work, check that you have correct connection settin
 
 The backend code can be found on [GitHub](https://github.com/fullstack-hy2020/graphql-phonebook-backend/tree/part8-7), branch <i>part8-7</i>.
 
+Implementin gsubscriptions involves a lot of configurations. You will be able to cope with the few exercises of this course without worrying much about the details. If you planning to use subsctiptions in an production use application, you should definitely read carefully Apollo's [documentation on subscriptions](https://www.apollographql.com/docs/apollo-server/data/subscriptions).
+
 ### Subscriptions on the client
 
 In order to use subscriptions in our React application, we have to do some changes, especially on its [configuration](https://www.apollographql.com/docs/react/data/subscriptions/).
 The configuration in <i>index.js</i> has to be modified like so: 
 
 ```js
 import { 
-  ApolloClient, ApolloProvider, HttpLink, InMemoryCache, 
+  ApolloClient, InMemoryCache, ApolloProvider, createHttpLink,
   split  // highlight-line
 } from '@apollo/client'
 import { setContext } from '@apollo/client/link/context'
@@ -656,15 +673,11 @@ const authLink = setContext((_, { headers }) => {
   }
 })
 
-const httpLink = new HttpLink({
-  uri: 'http://localhost:4000',
-})
+const httpLink = createHttpLink({ uri: 'http://localhost:4000' })
 
 // highlight-start
 const wsLink = new GraphQLWsLink(
-  createClient({
-    url: 'ws://localhost:4000',
-  })
+  createClient({ url: 'ws://localhost:4000' })
 )
 // highlight-end
 
@@ -703,10 +716,7 @@ npm install @apollo/client graphql-ws
 The new configuration is due to the fact that the application must have an HTTP connection as well as a WebSocket connection to the GraphQL server.
 
 ```js
-const wsLink = new WebSocketLink({
-  uri: `ws://localhost:4000/graphql`,
-  options: { reconnect: true }
-})
+const httpLink = createHttpLink({ uri: 'http://localhost:4000' })
 
 const wsLink = new GraphQLWsLink(
   createClient({
@@ -717,7 +727,7 @@ const wsLink = new GraphQLWsLink(
 
 The subscriptions are done using the [useSubscription](https://www.apollographql.com/docs/react/api/react/hooks/#usesubscription) hook function.
 
-Let's modify the code like so:
+Let's make the following changes to the code. Add the code defining the order to the file <i>queries.js</i>:
 
 ```js
 // highlight-start
@@ -729,11 +739,14 @@ export const PERSON_ADDED = gql`
   }
   ${PERSON_DETAILS}
 `
-// highlight-end
+```
+
+and do the subscription in the App component:
+
+```js
+
+import { useQuery, useMutation, useSubscription } from '@apollo/client' // highlight-line
 
-import {
-  useQuery, useMutation, useSubscription, useApolloClient // highlight-line
-} from '@apollo/client'
 
 const App = () => {
   // ...