diff --git a/src/content/8/en/part8b.md b/src/content/8/en/part8b.md
index b6ab9817199..d964773cbb2 100644
--- a/src/content/8/en/part8b.md
+++ b/src/content/8/en/part8b.md
@@ -84,9 +84,10 @@ The application can communicate with a GraphQL server using the *client* object.
 import ReactDOM from 'react-dom/client'
 import App from './App'
 
+import { ApolloProvider } from '@apollo/client/react' // highlight-line
+
 import {
   ApolloClient,
-  ApolloProvider, // highlight-line
   InMemoryCache,
 } from '@apollo/client'
 
@@ -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' // highlight-line
 
 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!) {