Merge pull request #4141 from goncalooliveirasilva/fix/part8-apollo-client

Part 8b, 8d, 8e: update Apollo Client imports (ApolloProvider, useQuery, useMutation) and setup to v4

Author: vejol

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'
 

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

src/content/8/en/part8e.md

@@ -351,15 +351,15 @@ 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:
 
 ```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 = () => {

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'
 

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

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 = () => {
   // ...

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'
 

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

src/content/8/fi/osa8e.md

@@ -350,15 +350,15 @@ 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:
 
 ```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 = () => {