From 60e39c29c49884a275f99346f6398aab4d1e26d1 Mon Sep 17 00:00:00 2001
From: vh-fullstack <109882814+vh-fullstack@users.noreply.github.com>
Date: Mon, 1 Sep 2025 15:20:43 -0400
Subject: [PATCH 1/2] Fix ApolloProvider import for React compatibility

In the current course material, ApolloProvider is imported as:

import {
  ApolloClient,
  ApolloProvider,
  InMemoryCache,
} from '@apollo/client'

With recent versions of Apollo Client, this produces the error:

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/@apollo_client.js?v=8222a40d' does not provide an export named 'ApolloProvider'

This happens because ApolloProvider is now exported from a separate submodule for React.

The fix is to import ApolloProvider from '@apollo/client/react' instead:

import { ApolloProvider } from '@apollo/client/react';

This follows the official Apollo documentation:
https://www.apollographql.com/docs/react/get-started#step-4-connect-your-client-to-react

**Corresponding course part:** Part 8
---
 src/content/8/en/part8b.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/content/8/en/part8b.md b/src/content/8/en/part8b.md
index b6ab981719..48480255de 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'
 

From c37071c39913e469ad82c2871c1863ca15d324c2 Mon Sep 17 00:00:00 2001
From: vh-fullstack <109882814+vh-fullstack@users.noreply.github.com>
Date: Mon, 1 Sep 2025 15:38:19 -0400
Subject: [PATCH 2/2] Fix useQuery import

### Additional update: useQuery import
Similar to ApolloProvider, useQuery should also be imported from '@apollo/client/react'.

Previous import:
import { useQuery } from '@apollo/client'

Fix:
import { useQuery } from '@apollo/client/react'

This aligns with the official Apollo documentation and prevents module resolution errors in recent versions.
---
 src/content/8/en/part8b.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/content/8/en/part8b.md b/src/content/8/en/part8b.md
index 48480255de..d964773cbb 100644
--- a/src/content/8/en/part8b.md
+++ b/src/content/8/en/part8b.md
@@ -113,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 {
@@ -246,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!) {