Skip to content

Commit 3c37706

Browse files
jedwards1211jedwards1211
committed
fix: @apollo/react-hooks generated types
1 parent 5cd99a2 commit 3c37706

9 files changed

Lines changed: 172 additions & 66 deletions

‎src/internal/generateFlowTypesFromDocument.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -338,7 +338,7 @@ export default function generateFlowTypesFromDocument({
338338
variables = _variables
339339
operationTypes.variables = _variables
340340
}
341-
if (data && variables) {
341+
if (data && variables && !_config.useFunctionTypeArguments) {
342342
const mutationFunction = statement([
343343
`type ${name}Function = ${MutationFunction()}<${data.id.name}${
344344
variables ? `, ${variables.id.name}` : ''

‎src/internal/graphqlTypegenCore.ts‎

Lines changed: 63 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,14 @@ function makeFunctionTypeArguments(
4646
data: TypeAlias,
4747
variables?: TypeAlias | null | undefined
4848
): TypeParameterInstantiation {
49-
const params = [j.genericTypeAnnotation(j.identifier(data.id.name), null)]
50-
if (variables) {
51-
params.push(j.genericTypeAnnotation(j.identifier(variables.id.name), null))
52-
}
49+
const params: FlowTypeKind[] = [
50+
j.genericTypeAnnotation(j.identifier(data.id.name), null),
51+
]
52+
params.push(
53+
variables
54+
? j.genericTypeAnnotation(j.identifier(variables.id.name), null)
55+
: j.objectTypeAnnotation([])
56+
)
5357
return j.typeParameterInstantiation(params)
5458
}
5559

@@ -140,6 +144,22 @@ export default function graphqlTypegenCore(
140144
)
141145
}
142146

147+
const queryResultAnnotation = (
148+
data: TypeAlias,
149+
variables?: TypeAlias | null | undefined
150+
): TypeAnnotation =>
151+
j.typeAnnotation(
152+
j.genericTypeAnnotation(
153+
j.identifier(addQueryResult()),
154+
j.typeParameterInstantiation([
155+
j.genericTypeAnnotation(j.identifier(data.id.name), null),
156+
variables
157+
? j.genericTypeAnnotation(j.identifier(variables.id.name), null)
158+
: j.objectTypeAnnotation([]),
159+
])
160+
)
161+
)
162+
143163
const mutationResultAnnotation = (data: TypeAlias): TypeAnnotation =>
144164
j.typeAnnotation(
145165
j.genericTypeAnnotation(
@@ -150,25 +170,31 @@ export default function graphqlTypegenCore(
150170
)
151171
)
152172

153-
const subscriptionResultAnnotation = (
173+
const mutationFunctionAnnotation = (
154174
data: TypeAlias,
155175
variables?: TypeAlias | null | undefined
156-
): TypeAnnotation => {
157-
const parameters = [
158-
j.genericTypeAnnotation(j.identifier(data.id.name), null),
159-
]
160-
if (variables) {
161-
parameters.push(
162-
j.genericTypeAnnotation(j.identifier(variables.id.name), null)
176+
): TypeAnnotation =>
177+
j.typeAnnotation(
178+
j.genericTypeAnnotation(
179+
j.identifier(addMutationFunction()),
180+
j.typeParameterInstantiation([
181+
j.genericTypeAnnotation(j.identifier(data.id.name), null),
182+
variables
183+
? j.genericTypeAnnotation(j.identifier(variables.id.name), null)
184+
: j.objectTypeAnnotation([]),
185+
])
163186
)
164-
}
165-
return j.typeAnnotation(
187+
)
188+
189+
const subscriptionResultAnnotation = (data: TypeAlias): TypeAnnotation =>
190+
j.typeAnnotation(
166191
j.genericTypeAnnotation(
167192
j.identifier(addSubscriptionResult()),
168-
j.typeParameterInstantiation(parameters)
193+
j.typeParameterInstantiation([
194+
j.genericTypeAnnotation(j.identifier(data.id.name), null),
195+
])
169196
)
170197
)
171-
}
172198

173199
const findQueryPaths = (root: Collection<any>): ASTPath<any>[] => [
174200
...root
@@ -217,6 +243,13 @@ export default function graphqlTypegenCore(
217243
statement([`import {type QueryRenderProps} from '${apolloPkg}'`])
218244
).QueryRenderProps
219245
)
246+
const addQueryResult = once(
247+
() =>
248+
addImports(
249+
root,
250+
statement([`import {type QueryResult} from '${apolloPkg}'`])
251+
).QueryResult
252+
)
220253
const addMutationFunction = once(
221254
() =>
222255
addImports(
@@ -434,16 +467,18 @@ export default function graphqlTypegenCore(
434467
const childFunction = getChildFunction(elementPath)
435468
if (childFunction) {
436469
const firstParam = childFunction.get('params', 0)
437-
const { mutationFunction } =
470+
const { data, variables, mutationFunction } =
438471
onlyValue(generatedTypes.mutation) || {}
439-
if (!mutationFunction) return
472+
if (!data) return
440473
if (firstParam && firstParam.node.type === 'Identifier') {
441-
firstParam.node.typeAnnotation = j.typeAnnotation(
442-
j.genericTypeAnnotation(
443-
j.identifier(mutationFunction.id.name),
444-
null
445-
)
446-
)
474+
firstParam.node.typeAnnotation = mutationFunction
475+
? j.typeAnnotation(
476+
j.genericTypeAnnotation(
477+
j.identifier(mutationFunction.id.name),
478+
null
479+
)
480+
)
481+
: mutationFunctionAnnotation(data, variables)
447482
}
448483
}
449484
})
@@ -477,7 +512,7 @@ export default function graphqlTypegenCore(
477512
path.node.id.type === 'Identifier' ||
478513
path.node.id.type === 'ObjectPattern'
479514
) {
480-
path.node.id.typeAnnotation = queryRenderPropsAnnotation(
515+
path.node.id.typeAnnotation = queryResultAnnotation(
481516
data,
482517
variables
483518
)
@@ -530,7 +565,7 @@ export default function graphqlTypegenCore(
530565
.forEach((path: ASTPath<VariableDeclarator>): void => {
531566
const { data, variables, mutationFunction } =
532567
onlyValue(generatedTypes.mutation) || {}
533-
if (!mutationFunction || !data) return
568+
if (!data) return
534569
const {
535570
node: { id },
536571
} = path
@@ -540,6 +575,7 @@ export default function graphqlTypegenCore(
540575
variables
541576
)
542577
} else {
578+
if (!mutationFunction) return
543579
if (id.type !== 'ArrayPattern' && id.type !== 'Identifier') return
544580
const tupleTypes: FlowTypeKind[] = [
545581
j.genericTypeAnnotation(
@@ -586,10 +622,7 @@ export default function graphqlTypegenCore(
586622
path.node.id.type === 'Identifier' ||
587623
path.node.id.type === 'ObjectPattern'
588624
) {
589-
path.node.id.typeAnnotation = subscriptionResultAnnotation(
590-
data,
591-
variables
592-
)
625+
path.node.id.typeAnnotation = subscriptionResultAnnotation(data)
593626
}
594627
if (path.node.init?.type !== 'CallExpression') return
595628
const options = path.node.init.arguments[1]

‎test/graphql-typegen-async/MutationComponent.ts‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,6 @@ mutation createReview($episode: Episode!, $review: ReviewInput!) {
4848
}
4949
\`
5050
51-
// @graphql-typegen auto-generated
52-
type CreateReviewMutationFunction = MutationFunction<
53-
CreateReviewMutationData,
54-
CreateReviewMutationVariables
55-
>
56-
5751
// @graphql-typegen auto-generated
5852
type CreateReviewMutationVariables = {
5953
episode: 'NEWHOPE' | 'EMPIRE' | 'JEDI',
@@ -79,7 +73,10 @@ type CreateReviewMutationData = {
7973
8074
const Comp = ({id: string}): React.Node => (
8175
<Mutation mutation={mutation}>
82-
{(createReview: CreateReviewMutationFunction): React.Node => (
76+
{(createReview: MutationFunction<
77+
CreateReviewMutationData,
78+
CreateReviewMutationVariables
79+
>): React.Node => (
8380
<div />
8481
)}
8582
</Mutation>

‎test/graphql-typegen-async/MutationComponentNoFunctionTypeArguments.ts‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import * as path from 'path'
2+
3+
export const file = 'file.js'
4+
5+
export const input = `
6+
// @flow
7+
import * as React from 'react'
8+
import { Mutation } from '@apollo/react-components'
9+
import gql from 'graphql-tag'
10+
11+
const mutation = gql\`
12+
mutation createReview($episode: Episode!, $review: ReviewInput!) {
13+
createReview(episode: $episode, review: $review) {
14+
episode
15+
stars
16+
commentary
17+
}
18+
}
19+
\`
20+
21+
const Comp = ({id: string}): React.Node => (
22+
<Mutation mutation={mutation}>
23+
{(createReview): React.Node => (
24+
<div />
25+
)}
26+
</Mutation>
27+
)
28+
`
29+
30+
export const options = {
31+
addTypename: false,
32+
useFunctionTypeArguments: false,
33+
schemaFile: path.resolve(__dirname, '../../starwars.graphql'),
34+
}
35+
36+
export const expected = `
37+
// @flow
38+
import * as React from 'react'
39+
import { Mutation, type MutationFunction } from '@apollo/react-components'
40+
import gql from 'graphql-tag'
41+
42+
const mutation = gql\`
43+
mutation createReview($episode: Episode!, $review: ReviewInput!) {
44+
createReview(episode: $episode, review: $review) {
45+
episode
46+
stars
47+
commentary
48+
}
49+
}
50+
\`
51+
52+
// @graphql-typegen auto-generated
53+
type CreateReviewMutationFunction = MutationFunction<
54+
CreateReviewMutationData,
55+
CreateReviewMutationVariables
56+
>
57+
58+
// @graphql-typegen auto-generated
59+
type CreateReviewMutationVariables = {
60+
episode: 'NEWHOPE' | 'EMPIRE' | 'JEDI',
61+
review: {
62+
stars: number,
63+
commentary?: ?string,
64+
favorite_color?: ?{
65+
red: number,
66+
green: number,
67+
blue: number,
68+
}
69+
}
70+
}
71+
72+
// @graphql-typegen auto-generated
73+
type CreateReviewMutationData = {
74+
createReview: ?{
75+
episode: ?('NEWHOPE' | 'EMPIRE' | 'JEDI'),
76+
stars: number,
77+
commentary: ?string,
78+
},
79+
}
80+
81+
const Comp = ({id: string}): React.Node => (
82+
<Mutation mutation={mutation}>
83+
{(createReview: CreateReviewMutationFunction): React.Node => (
84+
<div />
85+
)}
86+
</Mutation>
87+
)
88+
`

‎test/graphql-typegen-async/useMutation.ts‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const options = {
3232
export const expected = `
3333
// @flow
3434
import * as React from 'react'
35-
import { useMutation, type MutationFunction } from '@apollo/react-hooks'
35+
import { useMutation } from '@apollo/react-hooks'
3636
import gql from 'graphql-tag'
3737
3838
const mutation = gql\`
@@ -45,12 +45,6 @@ mutation createReview($episode: Episode!, $review: ReviewInput!) {
4545
}
4646
\`
4747
48-
// @graphql-typegen auto-generated
49-
type CreateReviewMutationFunction = MutationFunction<
50-
CreateReviewMutationData,
51-
CreateReviewMutationVariables
52-
>
53-
5448
// @graphql-typegen auto-generated
5549
type CreateReviewMutationVariables = {
5650
episode: 'NEWHOPE' | 'EMPIRE' | 'JEDI',

‎test/graphql-typegen-async/useMutationAddTypename.ts‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export const options = {
3131
export const expected = `
3232
// @flow
3333
import * as React from 'react'
34-
import { useMutation, type MutationFunction } from '@apollo/react-hooks'
34+
import { useMutation } from '@apollo/react-hooks'
3535
import gql from 'graphql-tag'
3636
3737
const mutation = gql\`
@@ -44,12 +44,6 @@ mutation createReview($episode: Episode!, $review: ReviewInput!) {
4444
}
4545
\`
4646
47-
// @graphql-typegen auto-generated
48-
type CreateReviewMutationFunction = MutationFunction<
49-
CreateReviewMutationData,
50-
CreateReviewMutationVariables
51-
>
52-
5347
// @graphql-typegen auto-generated
5448
type CreateReviewMutationVariables = {
5549
episode: 'NEWHOPE' | 'EMPIRE' | 'JEDI',

‎test/graphql-typegen-async/useQueryNoFunctionTypeArguments.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const options = {
3535
export const expected = `
3636
// @flow
3737
import * as React from 'react'
38-
import { useQuery, type QueryRenderProps } from '@apollo/react-hooks'
38+
import { useQuery, type QueryResult } from '@apollo/react-hooks'
3939
import gql from 'graphql-tag'
4040
4141
const query = gql\`
@@ -61,7 +61,7 @@ type TestQueryData = {
6161
}
6262
6363
const Comp = ({id: string}): React.Node => {
64-
const {loading, error, data}: QueryRenderProps<TestQueryData, TestQueryVariables> = useQuery(query, {
64+
const {loading, error, data}: QueryResult<TestQueryData, TestQueryVariables> = useQuery(query, {
6565
variables: ({id}: TestQueryVariables),
6666
})
6767
return <div />

‎test/graphql-typegen-async/useSubscriptionModifications.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -78,12 +78,12 @@ type TestSubscriptionData = {
7878
}
7979
8080
const Comp = ({episode}: {episode: Episode}): React.Node => {
81-
const data: SubscriptionResult<
82-
TestSubscriptionData,
83-
TestSubscriptionVariables
84-
> = useSubscription(subscription, {
85-
variables: ({ episode }: TestSubscriptionVariables),
86-
})
81+
const data: SubscriptionResult<TestSubscriptionData> = useSubscription(
82+
subscription,
83+
{
84+
variables: ({ episode }: TestSubscriptionVariables),
85+
}
86+
)
8787
return <div />
8888
}
8989
`

‎test/graphql-typegen-async/useSubscriptionNoFunctionTypeArguments.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -66,12 +66,12 @@ type TestSubscriptionData = {
6666
}
6767
6868
const Comp = ({episode}: {episode: Episode}): React.Node => {
69-
const data: SubscriptionResult<
70-
TestSubscriptionData,
71-
TestSubscriptionVariables
72-
> = useSubscription(subscription, {
73-
variables: ({ episode }: TestSubscriptionVariables),
74-
})
69+
const data: SubscriptionResult<TestSubscriptionData> = useSubscription(
70+
subscription,
71+
{
72+
variables: ({ episode }: TestSubscriptionVariables),
73+
}
74+
)
7575
return <div />
7676
}
7777
`

0 commit comments

Comments
 (0)