diff --git a/src/content/8/en/part8b.md b/src/content/8/en/part8b.md
index b6ab9817199..b09f9e78cf8 100644
--- a/src/content/8/en/part8b.md
+++ b/src/content/8/en/part8b.md
@@ -23,7 +23,7 @@ At the moment, there are two good options: [Relay](https://facebook.github.io/re
 
 ### Apollo client
 
-Let us create a new React app, and can continue installing dependencies required by [Apollo client](https://www.apollographql.com/docs/react/get-started/).
+Let's create a new React app and install the necessary dependencies for [Apollo client](https://www.apollographql.com/docs/react/get-started/).
 
 ```bash
 npm install @apollo/client graphql
@@ -35,10 +35,12 @@ We'll start with the following code for our application:
 import ReactDOM from 'react-dom/client'
 import App from './App'
 
-import { ApolloClient, InMemoryCache, gql } from '@apollo/client'
+import { ApolloClient, HttpLink, InMemoryCache, gql } from '@apollo/client'
 
 const client = new ApolloClient({
-  uri: 'http://localhost:4000',
+  link: new HttpLink({
+    uri: 'http://localhost:4000' 
+  }),
   cache: new InMemoryCache(),
 })
 
@@ -84,14 +86,13 @@ The application can communicate with a GraphQL server using the *client* object.
 import ReactDOM from 'react-dom/client'
 import App from './App'
 
-import {
-  ApolloClient,
-  ApolloProvider, // highlight-line
-  InMemoryCache,
-} from '@apollo/client'
+import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
+import { ApolloProvider } from '@apollo/client/react' // highlight-line
 
 const client = new ApolloClient({
-  uri: 'http://localhost:4000',
+  link: new HttpLink({
+    uri: 'http://localhost:4000' 
+  }),
   cache: new InMemoryCache(),
 })
 
@@ -112,7 +113,8 @@ Currently, the use of the hook function [useQuery](https://www.apollographql.com
 The query is made by the <i>App</i> component, the code of which is as follows:
 
 ```js
-import { gql, useQuery } from '@apollo/client'
+import { gql } from '@apollo/client'
+import { useQuery } from '@apollo/client/react'
 
 const ALL_PERSONS = gql`
 query {
@@ -245,7 +247,8 @@ The solution is as follows:
 
 ```js
 import { useState } from 'react'
-import { gql, useQuery } from '@apollo/client'
+import { gql } from '@apollo/client'
+import { useQuery } from '@apollo/client/react'
 
 const FIND_PERSON = gql`
   query findPersonByName($nameToSearch: String!) {
@@ -401,7 +404,8 @@ Let's create a new component for adding a new person to the directory:
 
 ```js
 import { useState } from 'react'
-import { gql, useMutation } from '@apollo/client'
+import { gql } from '@apollo/client'
+import { useMutation } from '@apollo/client/react'
 
 const CREATE_PERSON = gql`
   // ...
@@ -686,7 +690,7 @@ Interesting lines on the code have been highlighted.
 
 ```js
 import { useState } from 'react'
-import { useMutation } from '@apollo/client'
+import { useMutation } from '@apollo/client/react'
 
 import { EDIT_NUMBER } from '../queries'
 
diff --git a/src/content/8/en/part8d.md b/src/content/8/en/part8d.md
index 4da92a37c1a..92c5449436f 100644
--- a/src/content/8/en/part8d.md
+++ b/src/content/8/en/part8d.md
@@ -55,7 +55,7 @@ Interesting lines in the code have been highlighted:
 
 ```js
 import { useState, useEffect } from 'react'
-import { useMutation } from '@apollo/client'
+import { useMutation } from '@apollo/client/react'
 import { LOGIN } from '../queries'
 
 const LoginForm = ({ setError, setToken }) => {
@@ -164,7 +164,8 @@ const App = () => {
 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>main.jsx</i> a little.
 
 ```js
-import { ApolloClient, InMemoryCache, ApolloProvider, createHttpLink } from '@apollo/client'  // highlight-line
+import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client'  // highlight-line
+import { ApolloProvider } from '@apollo/client/react'
 import { setContext } from '@apollo/client/link/context' // highlight-line
 
 // highlight-start
diff --git a/src/content/8/en/part8e.md b/src/content/8/en/part8e.md
index 60a0a074927..3d10e849c17 100644
--- a/src/content/8/en/part8e.md
+++ b/src/content/8/en/part8e.md
@@ -351,7 +351,7 @@ Unfortunately, startStandaloneServer does not allow adding subscriptions to the
 Let us install Express
 
 ```bash
-npm install express cors
+npm install express cors @as-integrations/express5
 ```
 
 and the file <i>index.js</i> changes to:
@@ -359,7 +359,7 @@ and the file <i>index.js</i> changes to:
 ```js
 const { ApolloServer } = require('@apollo/server')
 // highlight-start
-const { expressMiddleware } = require('@apollo/server/express4')
+const { expressMiddleware } = require('@as-integrations/express5')
 const { ApolloServerPluginDrainHttpServer } = require('@apollo/server/plugin/drainHttpServer')
 const { makeExecutableSchema } = require('@graphql-tools/schema')
 const express = require('express')
@@ -464,7 +464,7 @@ The file <i>index.js</i> is changed to:
 ```js
 // highlight-start
 const { WebSocketServer } = require('ws')
-const { useServer } = require('graphql-ws/lib/use/ws')
+const { useServer } = require('graphql-ws/use/ws')
 // highlight-end
 
 // ...
@@ -646,9 +646,10 @@ The configuration in <i>main.jsx</i> has to be modified like so:
 
 ```js
 import { 
-  ApolloClient, InMemoryCache, ApolloProvider, createHttpLink,
+  ApolloClient, InMemoryCache, createHttpLink,
   split  // highlight-line
 } from '@apollo/client'
+import { ApolloProvider } from '@apollo/client/react'
 import { setContext } from '@apollo/client/link/context'
 
 // highlight-start
@@ -739,7 +740,7 @@ and do the subscription in the App component:
 
 ```js
 
-import { useQuery, useMutation, useSubscription } from '@apollo/client' // highlight-line
+import { useQuery, useMutation, useSubscription } from '@apollo/client/react' // highlight-line
 
 
 const App = () => {
diff --git a/src/content/8/es/part8b.md b/src/content/8/es/part8b.md
index bdc383f3b9a..e0d8ae8e8c7 100644
--- a/src/content/8/es/part8b.md
+++ b/src/content/8/es/part8b.md
@@ -88,8 +88,9 @@ import ReactDOM from 'react-dom'
 import App from './App'
 
 import { 
-  ApolloClient, ApolloProvider, HttpLink, InMemoryCache // highlight-line
+  ApolloClient, HttpLink, InMemoryCache // highlight-line
 } from '@apollo/client' 
+import { ApolloProvider } from '@apollo/client/react' // highlight-line
 
 const client = new ApolloClient({
   cache: new InMemoryCache(),
@@ -119,7 +120,8 @@ La consulta la realiza el componente <i>App</i>, cuyo código es el siguiente:
 
 ```js
 import React from 'react'
-import { gql, useQuery } from '@apollo/client';
+import { gql } from '@apollo/client'
+import { useQuery } from '@apollo/client/react'
 
 const ALL_PERSONS = gql`
 query {
@@ -410,7 +412,8 @@ Creemos un nuevo componente para agregar una nueva persona al directorio:
 
 ```js
 import React, { useState } from 'react'
-import { gql, useMutation } from '@apollo/client'
+import { gql } from '@apollo/client'
+import { useMutation } from '@apollo/client/react'
 
 const CREATE_PERSON = gql`
   // ...
@@ -555,7 +558,7 @@ Por el momento, en nuestro código, las consultas y el componente están definid
 Separemos las definiciones de consulta en su propio archivo <i>queries.js</i>:
 
 ```js
-import { gql  } from '@apollo/client'
+import { gql } from '@apollo/client'
 
 export const ALL_PERSONS = gql`
   query {
@@ -697,7 +700,7 @@ Se han resaltado líneas interesantes en el código.
 
 ```js
 import React, { useState } from 'react'
-import { useMutation } from '@apollo/client'
+import { useMutation } from '@apollo/client/react'
 
 import { EDIT_NUMBER } from '../queries'
 
diff --git a/src/content/8/es/part8d.md b/src/content/8/es/part8d.md
index 429761ec28e..c0bff0bf999 100644
--- a/src/content/8/es/part8d.md
+++ b/src/content/8/es/part8d.md
@@ -57,7 +57,7 @@ Se han resaltado líneas interesantes en el código:
 
 ```js
 import React, { useState, useEffect } from 'react'
-import { useMutation } from '@apollo/client'
+import { useMutation } from '@apollo/client/react'
 import { LOGIN } from '../queries'
 
 const LoginForm = ({ setError, setToken }) => {
@@ -167,7 +167,8 @@ const App = () => {
 Después de que el backend cambie, la creación de nuevas personas requiere que se envíe un token de usuario válido con la solicitud. Para enviar el token, tenemos que cambiar un poco la forma en que definimos el objeto _ApolloClient_ en <i>index.js</i>.
 
 ```js
-import { ApolloClient, InMemoryCache, ApolloProvider, createHttpLink } from '@apollo/client'  // highlight-line
+import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client'  // highlight-line
+import { ApolloProvider } from '@apollo/client/react'
 import { setContext } from '@apollo/client/link/context' // highlight-line
 
 // highlight-start
diff --git a/src/content/8/es/part8e.md b/src/content/8/es/part8e.md
index 413e6b8834c..d073d89e328 100644
--- a/src/content/8/es/part8e.md
+++ b/src/content/8/es/part8e.md
@@ -228,9 +228,10 @@ La configuración en <i>index.js</i> tiene que ser modificada así:
 
 ```js
 import { 
-  ApolloClient, ApolloProvider, HttpLink, InMemoryCache, 
+  ApolloClient, HttpLink, InMemoryCache, 
   split  // highlight-line
 } from '@apollo/client'
+import { ApolloProvider } from '@apollo/client/react'
 import { setContext } from 'apollo-link-context'
 
 // highlight-start
@@ -323,7 +324,7 @@ export const PERSON_ADDED = gql`
 
 import {
   useQuery, useMutation, useSubscription, useApolloClient // highlight-line
-} from '@apollo/client'
+} from '@apollo/client/react'
 
 const App = () => {
   // ...
diff --git a/src/content/8/fi/osa8b.md b/src/content/8/fi/osa8b.md
index b5603d72cc8..d56e0992bd5 100644
--- a/src/content/8/fi/osa8b.md
+++ b/src/content/8/fi/osa8b.md
@@ -31,10 +31,12 @@ Aloitetaan seuraavalla ohjelmarungolla.
 import ReactDOM from 'react-dom/client'
 import App from './App'
 
-import { ApolloClient, InMemoryCache, gql } from '@apollo/client'
+import { ApolloClient, HttpLink, InMemoryCache, gql } from '@apollo/client'
 
 const client = new ApolloClient({
-  uri: 'http://localhost:4000',
+  link: new HttpLink({
+    uri: 'http://localhost:4000' 
+  }),
   cache: new InMemoryCache(),
 })
 
@@ -80,14 +82,13 @@ Sovellus pystyy siis kommunikoimaan GraphQL-palvelimen kanssa olion _client_ vä
 import ReactDOM from 'react-dom/client'
 import App from './App'
 
-import {
-  ApolloClient,
-  ApolloProvider, // highlight-line
-  InMemoryCache,
-} from '@apollo/client'
+import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
+import { ApolloProvider } from '@apollo/client/react' // highlight-line
 
 const client = new ApolloClient({
-  uri: 'http://localhost:4000',
+  link: new HttpLink({
+    uri: 'http://localhost:4000' 
+  }),
   cache: new InMemoryCache(),
 })
 
@@ -107,7 +108,8 @@ Apollo Client tarjoaa muutaman vaihtoehtoisen tavan [kyselyjen](https://www.apol
 Kyselyn tekevän komponentin <i>App</i> koodi näyttää seuraavalta:
 
 ```js
-import { gql, useQuery } from '@apollo/client'
+import { gql } from '@apollo/client'
+import { useQuery } from '@apollo/client/react'
 
 const ALL_PERSONS = gql`
   query {
@@ -237,7 +239,8 @@ Ratkaisu on seuraavassa:
 
 ```js
 import { useState } from 'react'
-import { gql, useQuery } from '@apollo/client'
+import { gql } from '@apollo/client'
+import { useQuery } from '@apollo/client/react'
 
 const FIND_PERSON = gql`
   query findPersonByName($nameToSearch: String!) {
@@ -392,7 +395,8 @@ Tehdään sovellukseen uusi komponentti uuden henkilön lisämiseen:
 
 ```js
 import { useState } from 'react'
-import { gql, useMutation } from '@apollo/client'
+import { gql } from '@apollo/client'
+import { useMutation } from '@apollo/client/react'
 
 const CREATE_PERSON = gql`
   // ...
@@ -664,7 +668,7 @@ Muutoksen suorittava komponentti <i>PhoneForm</i> on suoraviivainen, se kysyy lo
 
 ```js
 import { useState } from 'react'
-import { useMutation } from '@apollo/client'
+import { useMutation } from '@apollo/client/react'
 
 import { EDIT_NUMBER } from '../queries'
 
diff --git a/src/content/8/fi/osa8d.md b/src/content/8/fi/osa8d.md
index 16dbd0cbb6d..4ff6e76829c 100644
--- a/src/content/8/fi/osa8d.md
+++ b/src/content/8/fi/osa8d.md
@@ -54,7 +54,7 @@ Kirjautumisesta huolehtiva komponentti _LoginForm_ toimii melko samalla tavalla
 
 ```js
 import { useState, useEffect } from 'react'
-import { useMutation } from '@apollo/client'
+import { useMutation } from '@apollo/client/react'
 import { LOGIN } from '../queries'
 
 const LoginForm = ({ setError, setToken }) => {
@@ -164,7 +164,8 @@ Backendin muutosten jälkeen uusien henkilöiden lisäys puhelinluetteloon vaati
 Tämä edellyttää pientä muutosta tiedostossa <i>main.jsx</i> olevaan ApolloClient-olion konfiguraatioon
 
 ```js
-import { ApolloClient, InMemoryCache, ApolloProvider, createHttpLink } from '@apollo/client'  // highlight-line
+import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client'  // highlight-line
+import { ApolloProvider } from '@apollo/client/react'
 import { setContext } from '@apollo/client/link/context' // highlight-line
 
 // highlight-start
diff --git a/src/content/8/fi/osa8e.md b/src/content/8/fi/osa8e.md
index ed283d01433..d7c1b2b1da6 100644
--- a/src/content/8/fi/osa8e.md
+++ b/src/content/8/fi/osa8e.md
@@ -350,7 +350,7 @@ startStandaloneServer ei kuitenkaan mahdollista subscriptioiden lisäämistä so
 Asennetaan Express:
 
 ```
-npm install express cors
+npm install express cors @as-integrations/express5
 ```
 
 ja muutetaan tiedosto <i>index.js</i> seuraavaan muotoon:
@@ -358,7 +358,7 @@ ja muutetaan tiedosto <i>index.js</i> seuraavaan muotoon:
 ```js
 const { ApolloServer } = require('@apollo/server')
 // highlight-start
-const { expressMiddleware } = require('@apollo/server/express4')
+const { expressMiddleware } = require('@as-integrations/express5')
 const { ApolloServerPluginDrainHttpServer } = require('@apollo/server/plugin/drainHttpServer')
 const { makeExecutableSchema } = require('@graphql-tools/schema')
 const express = require('express')
@@ -468,7 +468,7 @@ Tiedosto <i>index.js</i> muuttuu seuraavasti
 ```js
 // highlight-start
 const { WebSocketServer } = require('ws')
-const { useServer } = require('graphql-ws/lib/use/ws')
+const { useServer } = require('graphql-ws/use/ws')
 // highlight-end
 
 // ...
@@ -655,9 +655,10 @@ Jotta saamme tilaukset käyttöön React-sovelluksessa, tarvitaan jonkin verran
 
 ```js
 import { 
-  ApolloClient, InMemoryCache, ApolloProvider, createHttpLink, 
+  ApolloClient, InMemoryCache, createHttpLink,
   split  // highlight-line
 } from '@apollo/client'
+import { ApolloProvider } from '@apollo/client/react'
 import { setContext } from 'apollo-link-context'
 
 // highlight-start
@@ -745,7 +746,7 @@ export const PERSON_ADDED = gql`
 ja tehdään tilaus komponentissa App:
 
 ```js
-import { useQuery, useApolloClient, useSubscription } from '@apollo/client'
+import { useQuery, useApolloClient, useSubscription } from '@apollo/client/react'
 import { PERSON_ADDED } from './queries.js'
 
 const App = () => {
diff --git a/src/content/8/zh/part8b.md b/src/content/8/zh/part8b.md
index bfe726d6df9..e881ba741a2 100644
--- a/src/content/8/zh/part8b.md
+++ b/src/content/8/zh/part8b.md
@@ -118,9 +118,8 @@ client.query({ query })
 import ReactDOM from 'react-dom'
 import App from './App'
 
-import {
-  ApolloClient, ApolloProvider, HttpLink, InMemoryCache // highlight-line
-} from '@apollo/client'
+import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
+import { ApolloProvider } from '@apollo/client/react' // highlight-line
 
 const client = new ApolloClient({
   cache: new InMemoryCache(),
@@ -151,7 +150,8 @@ ReactDOM.render(
 查询是由<i>App</i>组件进行的，其代码如下。
 
 ```js
-import { gql, useQuery } from '@apollo/client'
+import { gql } from '@apollo/client'
+import { useQuery } from '@apollo/client/react'
 
 const ALL_PERSONS = gql`
 query {
@@ -302,7 +302,8 @@ query findPersonByName($nameToSearch: String!) {
 
 ```js
 import { useState } from 'react'
-import { gql, useQuery } from '@apollo/client'
+import { gql } from '@apollo/client'
+import { useQuery } from '@apollo/client/react'
 
 const FIND_PERSON = gql`
   query findPersonByName($nameToSearch: String!) {
@@ -474,7 +475,8 @@ mutation createPerson($name: String!, $street: String!, $city: String!, $phone:
 
 ```js
 import { useState } from 'react'
-import { gql, useMutation } from '@apollo/client'
+import { gql } from '@apollo/client'
+import { useMutation } from '@apollo/client/react'
 
 const CREATE_PERSON = gql`
   // ...
@@ -790,7 +792,7 @@ export const EDIT_NUMBER = gql`
 
 ```js
 import { useState } from 'react'
-import { useMutation } from '@apollo/client'
+import { useMutation } from '@apollo/client/react'
 
 import { EDIT_NUMBER } from '../queries'
 
diff --git a/src/content/8/zh/part8d.md b/src/content/8/zh/part8d.md
index b148c110ccf..16ef4684f81 100644
--- a/src/content/8/zh/part8d.md
+++ b/src/content/8/zh/part8d.md
@@ -60,7 +60,7 @@ export const LOGIN = gql`
 
 ```js
 import { useState, useEffect } from 'react'
-import { useMutation } from '@apollo/client'
+import { useMutation } from '@apollo/client/react'
 import { LOGIN } from '../queries'
 
 const LoginForm = ({ setError, setToken }) => {
diff --git a/src/content/8/zh/part8e.md b/src/content/8/zh/part8e.md
index 35204aa2179..9904a6a4564 100644
--- a/src/content/8/zh/part8e.md
+++ b/src/content/8/zh/part8e.md
@@ -580,10 +580,11 @@ const pubsub = new PubSub() // highlight-line
  <i>index.js</i>中的配置必须这样修改。
 
 ```js
-import {
-  ApolloClient, ApolloProvider, HttpLink, InMemoryCache,
+import { 
+  ApolloClient, InMemoryCache, createHttpLink,
   split  // highlight-line
 } from '@apollo/client'
+import { ApolloProvider } from '@apollo/client/react'
 import { setContext } from 'apollo-link-context'
 
 // highlight-start
@@ -682,7 +683,7 @@ export const PERSON_ADDED = gql`
 
 import {
   useQuery, useMutation, useSubscription, useApolloClient // highlight-line
-} from '@apollo/client'
+} from '@apollo/client/react'
 
 const App = () => {
   // ...