Skip to content

Commit 912ed1d

Browse files
emmatowndcousens
emmatown
and
dcousens
authored
Update to Apollo Client v4 (#9740)
Co-authored-by: Daniel Cousens <[email protected]>
1 parent 2a5cbc9 commit 912ed1d

19 files changed

Lines changed: 247 additions & 189 deletions

File tree

‎.changeset/afraid-beds-read.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@keystone-6/auth": major
3+
"@keystone-6/core": major
4+
---
5+
6+
Update `@apollo/client` to v4

‎examples/extend-graphql-subscriptions/admin/pages/subscriptions.tsx‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import { useState } from 'react'
22

33
import { PageContainer } from '@keystone-6/core/admin-ui/components'
44
import { Heading } from '@keystar/ui/typography'
5-
import { ApolloClient, gql, InMemoryCache, useSubscription, HttpLink } from '@apollo/client'
5+
import { ApolloClient, gql, InMemoryCache, HttpLink, type TypedDocumentNode } from '@apollo/client'
6+
import { useSubscription } from '@apollo/client/react'
67
import { createClient } from 'graphql-ws'
78
import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
89
import { css } from '@emotion/css'
@@ -25,7 +26,7 @@ const TIME = gql`
2526
iso
2627
}
2728
}
28-
`
29+
` as TypedDocumentNode<{ time: { iso: string } }>
2930

3031
// Setup the Post subscriptions
3132
const POST_PUBLISHED = gql`
@@ -39,7 +40,9 @@ const POST_PUBLISHED = gql`
3940
}
4041
}
4142
}
42-
`
43+
` as TypedDocumentNode<{
44+
postPublished: { id: string; title: string; content: string; author: { name: string } }
45+
}>
4346

4447
const POST_UPDATED = gql`
4548
subscription POST_UPDATED {
@@ -52,7 +55,9 @@ const POST_UPDATED = gql`
5255
}
5356
}
5457
}
55-
`
58+
` as TypedDocumentNode<{
59+
postUpdated: { id: string; title: string; content: string; author: { name: string } }
60+
}>
5661

5762
// Setup a backup http link for Apollo
5863
const httpLink = new HttpLink({
@@ -89,16 +94,16 @@ export default function CustomPage() {
8994
// Subscribe to `time` [using the Apollo client above]
9095
const { data, loading } = useSubscription(TIME, {
9196
client: subClient,
92-
onSubscriptionData: ({ subscriptionData }) => {
93-
appendTime(JSON.stringify(subscriptionData.data.time))
97+
onData: ({ data }) => {
98+
appendTime(JSON.stringify(data.data?.time))
9499
},
95100
})
96101

97102
// Subscribe to `postPublished`
98103
const { data: updatedPostData, loading: updatedPostLoading } = useSubscription(POST_UPDATED, {
99104
client: subClient,
100-
onSubscriptionData: ({ subscriptionData }) => {
101-
setUpdatedPostRows([...updatedPostRows, JSON.stringify(subscriptionData.data.postUpdated)])
105+
onData: ({ data }) => {
106+
setUpdatedPostRows([...updatedPostRows, JSON.stringify(data?.data?.postUpdated)])
102107
},
103108
})
104109

@@ -107,11 +112,8 @@ export default function CustomPage() {
107112
POST_PUBLISHED,
108113
{
109114
client: subClient,
110-
onSubscriptionData: ({ subscriptionData }) => {
111-
setPublishedPostRows([
112-
...publishedPostRows,
113-
JSON.stringify(subscriptionData.data.postPublished),
114-
])
115+
onData: ({ data }) => {
116+
setPublishedPostRows([...publishedPostRows, JSON.stringify(data?.data?.postPublished)])
115117
},
116118
}
117119
)
@@ -123,6 +125,7 @@ export default function CustomPage() {
123125
<h4> Current Time </h4>
124126
<div>
125127
{!loading &&
128+
!!data?.time?.iso &&
126129
new Date(data?.time?.iso).toLocaleDateString() +
127130
' ' +
128131
new Date(data?.time?.iso).toLocaleTimeString()}

‎examples/extend-graphql-subscriptions/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"postinstall": "keystone postinstall"
1111
},
1212
"dependencies": {
13-
"@apollo/client": "^3.12.2",
13+
"@apollo/client": "^4.0.9",
1414
"@emotion/css": "^11.7.1",
1515
"@graphql-tools/schema": "^9.0.0",
1616
"@keystar/ui": "^0.7.16",

‎packages/auth/src/components/Navigation.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,12 @@ import { Divider } from '@keystar/ui/layout'
55
import { TooltipTrigger, Tooltip } from '@keystar/ui/tooltip'
66
import { Text } from '@keystar/ui/typography'
77

8-
import { useQuery, useMutation, gql } from '@keystone-6/core/admin-ui/apollo'
8+
import {
9+
useQuery,
10+
useMutation,
11+
gql,
12+
type TypedDocumentNode,
13+
} from '@keystone-6/core/admin-ui/apollo'
914
import {
1015
DeveloperResourcesMenu,
1116
NavList,
@@ -67,7 +72,7 @@ const END_SESSION = gql`
6772
mutation KsAuthEndSession {
6873
endSession
6974
}
70-
`
75+
` as TypedDocumentNode<{ endSession: boolean }>
7176

7277
function SignoutButton({ authItemLabel }: { authItemLabel: string }) {
7378
const router = useRouter()

‎packages/auth/src/pages/InitPage.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import NextHead from 'next/head'
22

3-
import { gql, useMutation } from '@keystone-6/core/admin-ui/apollo'
3+
import { gql, type TypedDocumentNode, useMutation } from '@keystone-6/core/admin-ui/apollo'
44
import { useList } from '@keystone-6/core/admin-ui/context'
55
import { useRouter } from '@keystone-6/core/admin-ui/router'
66
import { Fields, useBuildItem } from '@keystone-6/core/admin-ui/utils'
@@ -34,7 +34,8 @@ function InitPage({
3434
CreateInitialInput,
3535
ItemAuthenticationWithPasswordSuccess: successTypename,
3636
} = authGqlNames
37-
const [tryCreateItem, { loading, error, data }] = useMutation(gql`
37+
const [tryCreateItem, { loading, error, data }] = useMutation(
38+
gql`
3839
mutation KsAuthCreateFirstItem ($data: ${CreateInitialInput}!) {
3940
authenticate: ${createInitialItem}(data: $data) {
4041
... on ${successTypename} {
@@ -43,7 +44,11 @@ function InitPage({
4344
}
4445
}
4546
}
46-
}`)
47+
}` as TypedDocumentNode<
48+
{ authenticate: { __typename: string; item: { id: string } } },
49+
{ data: Record<string, unknown> }
50+
>
51+
)
4752

4853
const onSubmit = async (e: React.FormEvent) => {
4954
if (e.target !== e.currentTarget) return
@@ -97,7 +102,7 @@ function InitPage({
97102
<Heading elementType="h1" size="regular">
98103
Create your first user
99104
</Heading>
100-
<GraphQLErrorNotice errors={[error?.networkError, ...(error?.graphQLErrors ?? [])]} />
105+
<GraphQLErrorNotice errors={[error]} />
101106
<Fields {...builder.props} />
102107
<Button alignSelf="start" isPending={pending} prominence="high" type="submit">
103108
Get started

‎packages/auth/src/pages/SigninPage.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { Content } from '@keystar/ui/slots'
99
import { TextField } from '@keystar/ui/text-field'
1010
import { Heading, Text } from '@keystar/ui/typography'
1111

12-
import { gql, useMutation } from '@keystone-6/core/admin-ui/apollo'
12+
import { gql, type TypedDocumentNode, useMutation } from '@keystone-6/core/admin-ui/apollo'
1313
import { GraphQLErrorNotice, Logo } from '@keystone-6/core/admin-ui/components'
1414
import { useRouter } from '@keystone-6/core/admin-ui/router'
1515

@@ -46,7 +46,10 @@ function SigninPage({
4646
message
4747
}
4848
}
49-
}`,
49+
}` as TypedDocumentNode<
50+
{ authenticate: { __typename: string; item?: { id: string }; message?: string } },
51+
{ identity: string; secret: string }
52+
>,
5053
{
5154
refetchQueries: ['KsFetchAdminMeta'],
5255
}
@@ -64,7 +67,7 @@ function SigninPage({
6467
},
6568
})
6669

67-
if (data.authenticate.item) {
70+
if (data?.authenticate.item) {
6871
router.push('/')
6972
}
7073
} catch (e) {
@@ -106,7 +109,7 @@ function SigninPage({
106109
Sign in
107110
</Heading>
108111

109-
<GraphQLErrorNotice errors={[error?.networkError, ...(error?.graphQLErrors ?? [])]} />
112+
<GraphQLErrorNotice errors={[error]} />
110113

111114
{data?.authenticate?.__typename === failureTypename && (
112115
<Notice tone="critical">

‎packages/core/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -234,7 +234,7 @@
234234
},
235235
"dependencies": {
236236
"@apollo/cache-control-types": "^1.0.3",
237-
"@apollo/client": "^3.12.2",
237+
"@apollo/client": "^4.0.9",
238238
"@apollo/server": "^4.10.0",
239239
"@babel/runtime": "^7.24.7",
240240
"@graphql-ts/extend": "^2.0.0",
@@ -253,7 +253,7 @@
253253
"@react-aria/utils": "^3.25.1",
254254
"@react-stately/data": "^3.11.6",
255255
"@sindresorhus/slugify": "^3.0.0",
256-
"apollo-upload-client": "^17.0.0",
256+
"apollo-upload-client": "^19.0.0",
257257
"bcryptjs": "^3.0.0",
258258
"body-parser": "^2.0.0",
259259
"bytes": "^3.1.1",
@@ -287,7 +287,7 @@
287287
},
288288
"devDependencies": {
289289
"@keystone-6/core": "workspace:^",
290-
"@types/apollo-upload-client": "17.0.5",
290+
"@types/apollo-upload-client": "19.0.0",
291291
"@types/body-parser": "^1.19.2",
292292
"@types/bytes": "^3.1.1",
293293
"@types/cors": "^2.8.13",

‎packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/CreateItemPage/index.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,7 @@ function CreateItemPage({ listKey }: { listKey: string }) {
5353
*/}
5454
<button type="submit" style={{ display: 'none' }} />
5555
<VStack gap="large" gridArea="main" marginTop="xlarge" minWidth={0}>
56-
<GraphQLErrorNotice
57-
errors={[
58-
createItem?.error?.networkError,
59-
...(createItem?.error?.graphQLErrors ?? []),
60-
]}
61-
/>
56+
<GraphQLErrorNotice errors={[createItem.error]} />
6257
<Fields {...createItem.props} />
6358
</VStack>
6459

‎packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage/index.tsx‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { css, FocusRing, tokenSchema, transition } from '@keystar/ui/style'
99
import { Tooltip, TooltipTrigger } from '@keystar/ui/tooltip'
1010
import { Heading, Text } from '@keystar/ui/typography'
1111

12-
import { gql, useQuery } from '../../../../admin-ui/apollo'
12+
import { gql, type TypedDocumentNode, useQuery } from '../../../../admin-ui/apollo'
1313
import { GraphQLErrorNotice } from '../../../../admin-ui/components/GraphQLErrorNotice'
1414
import { PageContainer } from '../../../../admin-ui/components/PageContainer'
1515
import { useKeystone, useList } from '../../../../admin-ui/context'
@@ -19,7 +19,7 @@ export function HomePage() {
1919
const visibleLists = Object.values(lists).filter(list => !list.hideNavigation)
2020
const LIST_COUNTS_QUERY = useMemo(
2121
() =>
22-
gql(`
22+
gql`
2323
query KsFetchListCounts {
2424
${[
2525
...(function* () {
@@ -29,7 +29,9 @@ export function HomePage() {
2929
}
3030
})(),
3131
].join('\n')}
32-
}`),
32+
}` as TypedDocumentNode<{
33+
[key: string]: number | null
34+
}>,
3335
[visibleLists]
3436
)
3537

@@ -46,14 +48,7 @@ export function HomePage() {
4648
Lists
4749
</Text>
4850
<VStack paddingY="xlarge">
49-
<GraphQLErrorNotice
50-
errors={[
51-
metaError?.networkError,
52-
countsError?.networkError,
53-
...(metaError?.graphQLErrors ?? []),
54-
...(countsError?.graphQLErrors ?? []),
55-
]}
56-
/>
51+
<GraphQLErrorNotice errors={[metaError, countsError]} />
5752
<Grid
5853
autoRows="element.xlarge"
5954
columns={`repeat(

‎packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/common.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { Grid, HStack } from '@keystar/ui/layout'
1111
import { breakpointQueries, css, tokenSchema } from '@keystar/ui/style'
1212
import { toastQueue } from '@keystar/ui/toast'
1313
import { Heading, Text } from '@keystar/ui/typography'
14-
import { gql, useApolloClient } from '../../../../admin-ui/apollo'
14+
import { gql, type TypedDocumentNode, useApolloClient } from '../../../../admin-ui/apollo'
1515
import { Container, CONTAINER_MAX } from '../../../../admin-ui/components/Container'
1616
import { ErrorDetailsDialog } from '../../../../admin-ui/components/Errors'
1717
import type { ActionMeta, ListMeta } from '../../../../types'
@@ -29,7 +29,7 @@ export function ItemPageHeader({
2929
item: Record<string, unknown> | null
3030
label: string
3131
title: string
32-
onAction: ((action: ActionMeta, resultId: string) => void) | null
32+
onAction: ((action: ActionMeta, resultId: string | null) => void) | null
3333
}) {
3434
const router = useRouter()
3535

@@ -102,7 +102,7 @@ function ItemActions({
102102
list: ListMeta
103103
item: Record<string, unknown>
104104
actions: ActionMeta[]
105-
onAction: (action: ActionMeta, resultId: string) => void
105+
onAction: (action: ActionMeta, resultId: string | null) => void
106106
}) {
107107
const apolloClient = useApolloClient()
108108
const actionItems = useMemo(
@@ -140,15 +140,15 @@ function ItemActions({
140140
result: ${action.graphql.names.one}(where: { id: $id }) {
141141
id
142142
}
143-
}`,
144-
variables: { id: item.id },
143+
}` as TypedDocumentNode<{ result: { id: string } }, { id: string }>,
144+
variables: { id: item.id as string },
145145
})
146146

147147
if (!action.itemView.hideToast) {
148148
toastQueue.neutral(replace(m.success, list, { itemLabel }), { timeout: 5000 })
149149
}
150150

151-
onAction(action, data.data?.result?.id)
151+
onAction(action, data.data?.result?.id ?? null)
152152
} catch (error: any) {
153153
toastQueue.critical(replace(m.fail, list, { itemLabel }), {
154154
actionLabel: 'Details',

0 commit comments

Comments
 (0)