Skip to content

part 8e: Subscriptions on the client - update client setup for Apollo/client v4 #4210

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
prugit wants to merge 1 commit into
base: source
Choose a base branch
from
Open

part 8e: Subscriptions on the client - update client setup for Apollo/client v4 #4210

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions src/content/8/en/part8e.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -646,19 +646,19 @@ The configuration in <i>main.jsx</i> has to be modified like so:

```js
import {
ApolloClient, InMemoryCache, createHttpLink,
split // highlight-line
ApolloClient, InMemoryCache, HttpLink,
ApolloLink // highlight-line
} from '@apollo/client'
import { ApolloProvider } from '@apollo/client/react'
import { setContext } from '@apollo/client/link/context'
import { SetContextLink } from '@apollo/client/link/context'

// highlight-start
import { getMainDefinition } from '@apollo/client/utilities'
import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
import { createClient } from 'graphql-ws'
// highlight-end

const authLink = setContext((_, { headers }) => {
const authLink = new SetContextLink((_, { headers }) => {
const token = localStorage.getItem('phonenumbers-user-token')
return {
headers: {
Expand All @@ -668,7 +668,7 @@ const authLink = setContext((_, { headers }) => {
}
})

const httpLink = createHttpLink({ uri: 'http://localhost:4000' })
const httpLink = new HttpLink({ uri: 'http://localhost:4000' })

// highlight-start
const wsLink = new GraphQLWsLink(
Expand All @@ -677,7 +677,7 @@ const wsLink = new GraphQLWsLink(
// highlight-end

// highlight-start
const splitLink = split(
const splitLink = ApolloLink.split(
({ query }) => {
const definition = getMainDefinition(query)
return (
Expand Down Expand Up @@ -711,7 +711,7 @@ npm install 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 httpLink = createHttpLink({ uri: 'http://localhost:4000' })
const httpLink = new HttpLink({ uri: 'http://localhost:4000' })

const wsLink = new GraphQLWsLink(
createClient({
Expand Down