fix: @apollo/react-hooks generated types

jedwards1211 · jedwards1211 · commit 3c377069d39f · 2020-04-24T16:31:45.000-05:00
diff --git a/src/internal/generateFlowTypesFromDocument.ts b/src/internal/generateFlowTypesFromDocument.ts
@@ -338,7 +338,7 @@ export default function generateFlowTypesFromDocument({
         variables = _variables
         operationTypes.variables = _variables
       }
-      if (data && variables) {
+      if (data && variables && !_config.useFunctionTypeArguments) {
         const mutationFunction = statement([
           `type ${name}Function = ${MutationFunction()}<${data.id.name}${
             variables ? `, ${variables.id.name}` : ''
diff --git a/src/internal/graphqlTypegenCore.ts b/src/internal/graphqlTypegenCore.ts
@@ -46,10 +46,14 @@ function makeFunctionTypeArguments(
   data: TypeAlias,
   variables?: TypeAlias | null | undefined
 ): TypeParameterInstantiation {
-  const params = [j.genericTypeAnnotation(j.identifier(data.id.name), null)]
-  if (variables) {
-    params.push(j.genericTypeAnnotation(j.identifier(variables.id.name), null))
-  }
+  const params: FlowTypeKind[] = [
+    j.genericTypeAnnotation(j.identifier(data.id.name), null),
+  ]
+  params.push(
+    variables
+      ? j.genericTypeAnnotation(j.identifier(variables.id.name), null)
+      : j.objectTypeAnnotation([])
+  )
   return j.typeParameterInstantiation(params)
 }
 
@@ -140,6 +144,22 @@ export default function graphqlTypegenCore(
     )
   }
 
+  const queryResultAnnotation = (
+    data: TypeAlias,
+    variables?: TypeAlias | null | undefined
+  ): TypeAnnotation =>
+    j.typeAnnotation(
+      j.genericTypeAnnotation(
+        j.identifier(addQueryResult()),
+        j.typeParameterInstantiation([
+          j.genericTypeAnnotation(j.identifier(data.id.name), null),
+          variables
+            ? j.genericTypeAnnotation(j.identifier(variables.id.name), null)
+            : j.objectTypeAnnotation([]),
+        ])
+      )
+    )
+
   const mutationResultAnnotation = (data: TypeAlias): TypeAnnotation =>
     j.typeAnnotation(
       j.genericTypeAnnotation(
@@ -150,25 +170,31 @@ export default function graphqlTypegenCore(
       )
     )
 
-  const subscriptionResultAnnotation = (
+  const mutationFunctionAnnotation = (
     data: TypeAlias,
     variables?: TypeAlias | null | undefined
-  ): TypeAnnotation => {
-    const parameters = [
-      j.genericTypeAnnotation(j.identifier(data.id.name), null),
-    ]
-    if (variables) {
-      parameters.push(
-        j.genericTypeAnnotation(j.identifier(variables.id.name), null)
+  ): TypeAnnotation =>
+    j.typeAnnotation(
+      j.genericTypeAnnotation(
+        j.identifier(addMutationFunction()),
+        j.typeParameterInstantiation([
+          j.genericTypeAnnotation(j.identifier(data.id.name), null),
+          variables
+            ? j.genericTypeAnnotation(j.identifier(variables.id.name), null)
+            : j.objectTypeAnnotation([]),
+        ])
       )
-    }
-    return j.typeAnnotation(
+    )
+
+  const subscriptionResultAnnotation = (data: TypeAlias): TypeAnnotation =>
+    j.typeAnnotation(
       j.genericTypeAnnotation(
         j.identifier(addSubscriptionResult()),
-        j.typeParameterInstantiation(parameters)
+        j.typeParameterInstantiation([
+          j.genericTypeAnnotation(j.identifier(data.id.name), null),
+        ])
       )
     )
-  }
 
   const findQueryPaths = (root: Collection<any>): ASTPath<any>[] => [
     ...root
@@ -217,6 +243,13 @@ export default function graphqlTypegenCore(
         statement([`import {type QueryRenderProps} from '${apolloPkg}'`])
       ).QueryRenderProps
   )
+  const addQueryResult = once(
+    () =>
+      addImports(
+        root,
+        statement([`import {type QueryResult} from '${apolloPkg}'`])
+      ).QueryResult
+  )
   const addMutationFunction = once(
     () =>
       addImports(
@@ -434,16 +467,18 @@ export default function graphqlTypegenCore(
           const childFunction = getChildFunction(elementPath)
           if (childFunction) {
             const firstParam = childFunction.get('params', 0)
-            const { mutationFunction } =
+            const { data, variables, mutationFunction } =
               onlyValue(generatedTypes.mutation) || {}
-            if (!mutationFunction) return
+            if (!data) return
             if (firstParam && firstParam.node.type === 'Identifier') {
-              firstParam.node.typeAnnotation = j.typeAnnotation(
-                j.genericTypeAnnotation(
-                  j.identifier(mutationFunction.id.name),
-                  null
-                )
-              )
+              firstParam.node.typeAnnotation = mutationFunction
+                ? j.typeAnnotation(
+                    j.genericTypeAnnotation(
+                      j.identifier(mutationFunction.id.name),
+                      null
+                    )
+                  )
+                : mutationFunctionAnnotation(data, variables)
             }
           }
         })
@@ -477,7 +512,7 @@ export default function graphqlTypegenCore(
               path.node.id.type === 'Identifier' ||
               path.node.id.type === 'ObjectPattern'
             ) {
-              path.node.id.typeAnnotation = queryRenderPropsAnnotation(
+              path.node.id.typeAnnotation = queryResultAnnotation(
                 data,
                 variables
               )
@@ -530,7 +565,7 @@ export default function graphqlTypegenCore(
         .forEach((path: ASTPath<VariableDeclarator>): void => {
           const { data, variables, mutationFunction } =
             onlyValue(generatedTypes.mutation) || {}
-          if (!mutationFunction || !data) return
+          if (!data) return
           const {
             node: { id },
           } = path
@@ -540,6 +575,7 @@ export default function graphqlTypegenCore(
               variables
             )
           } else {
+            if (!mutationFunction) return
             if (id.type !== 'ArrayPattern' && id.type !== 'Identifier') return
             const tupleTypes: FlowTypeKind[] = [
               j.genericTypeAnnotation(
@@ -586,10 +622,7 @@ export default function graphqlTypegenCore(
               path.node.id.type === 'Identifier' ||
               path.node.id.type === 'ObjectPattern'
             ) {
-              path.node.id.typeAnnotation = subscriptionResultAnnotation(
-                data,
-                variables
-              )
+              path.node.id.typeAnnotation = subscriptionResultAnnotation(data)
             }
             if (path.node.init?.type !== 'CallExpression') return
             const options = path.node.init.arguments[1]
diff --git a/test/graphql-typegen-async/MutationComponent.ts b/test/graphql-typegen-async/MutationComponent.ts
@@ -48,12 +48,6 @@ mutation createReview($episode: Episode!, $review: ReviewInput!) {
 }
 \`
 
-// @graphql-typegen auto-generated
-type CreateReviewMutationFunction = MutationFunction<
-  CreateReviewMutationData,
-  CreateReviewMutationVariables
->
-
 // @graphql-typegen auto-generated
 type CreateReviewMutationVariables = {
   episode: 'NEWHOPE' | 'EMPIRE' | 'JEDI',
@@ -79,7 +73,10 @@ type CreateReviewMutationData = {
 
 const Comp = ({id: string}): React.Node => (
   <Mutation mutation={mutation}>
-    {(createReview: CreateReviewMutationFunction): React.Node => (
+    {(createReview: MutationFunction<
+      CreateReviewMutationData,
+      CreateReviewMutationVariables
+    >): React.Node => (
       <div />
     )}
   </Mutation>
diff --git a/test/graphql-typegen-async/MutationComponentNoFunctionTypeArguments.ts b/test/graphql-typegen-async/MutationComponentNoFunctionTypeArguments.ts
@@ -0,0 +1,88 @@
+import * as path from 'path'
+
+export const file = 'file.js'
+
+export const input = `
+// @flow
+import * as React from 'react'
+import { Mutation } from '@apollo/react-components'
+import gql from 'graphql-tag'
+
+const mutation = gql\`
+mutation createReview($episode: Episode!, $review: ReviewInput!) {
+  createReview(episode: $episode, review: $review) {
+    episode
+    stars
+    commentary
+  }
+}
+\`
+
+const Comp = ({id: string}): React.Node => (
+  <Mutation mutation={mutation}>
+    {(createReview): React.Node => (
+      <div />
+    )}
+  </Mutation>
+)
+`
+
+export const options = {
+  addTypename: false,
+  useFunctionTypeArguments: false,
+  schemaFile: path.resolve(__dirname, '../../starwars.graphql'),
+}
+
+export const expected = `
+// @flow
+import * as React from 'react'
+import { Mutation, type MutationFunction } from '@apollo/react-components'
+import gql from 'graphql-tag'
+
+const mutation = gql\`
+mutation createReview($episode: Episode!, $review: ReviewInput!) {
+  createReview(episode: $episode, review: $review) {
+    episode
+    stars
+    commentary
+  }
+}
+\`
+
+// @graphql-typegen auto-generated
+type CreateReviewMutationFunction = MutationFunction<
+  CreateReviewMutationData,
+  CreateReviewMutationVariables
+>
+
+// @graphql-typegen auto-generated
+type CreateReviewMutationVariables = {
+  episode: 'NEWHOPE' | 'EMPIRE' | 'JEDI',
+  review: {
+    stars: number,
+    commentary?: ?string,
+    favorite_color?: ?{
+      red: number,
+      green: number,
+      blue: number,
+    }
+  }
+}
+
+// @graphql-typegen auto-generated
+type CreateReviewMutationData = {
+  createReview: ?{
+    episode: ?('NEWHOPE' | 'EMPIRE' | 'JEDI'),
+    stars: number,
+    commentary: ?string,
+  },
+}
+
+const Comp = ({id: string}): React.Node => (
+  <Mutation mutation={mutation}>
+    {(createReview: CreateReviewMutationFunction): React.Node => (
+      <div />
+    )}
+  </Mutation>
+)
+`
diff --git a/test/graphql-typegen-async/useMutation.ts b/test/graphql-typegen-async/useMutation.ts
@@ -32,7 +32,7 @@ export const options = {
 export const expected = `
 // @flow
 import * as React from 'react'
-import { useMutation, type MutationFunction } from '@apollo/react-hooks'
+import { useMutation } from '@apollo/react-hooks'
 import gql from 'graphql-tag'
 
 const mutation = gql\`
@@ -45,12 +45,6 @@ mutation createReview($episode: Episode!, $review: ReviewInput!) {
 }
 \`
 
-// @graphql-typegen auto-generated
-type CreateReviewMutationFunction = MutationFunction<
-  CreateReviewMutationData,
-  CreateReviewMutationVariables
->
-
 // @graphql-typegen auto-generated
 type CreateReviewMutationVariables = {
   episode: 'NEWHOPE' | 'EMPIRE' | 'JEDI',
diff --git a/test/graphql-typegen-async/useMutationAddTypename.ts b/test/graphql-typegen-async/useMutationAddTypename.ts
@@ -31,7 +31,7 @@ export const options = {
 export const expected = `
 // @flow
 import * as React from 'react'
-import { useMutation, type MutationFunction } from '@apollo/react-hooks'
+import { useMutation } from '@apollo/react-hooks'
 import gql from 'graphql-tag'
 
 const mutation = gql\`
@@ -44,12 +44,6 @@ mutation createReview($episode: Episode!, $review: ReviewInput!) {
 }
 \`
 
-// @graphql-typegen auto-generated
-type CreateReviewMutationFunction = MutationFunction<
-  CreateReviewMutationData,
-  CreateReviewMutationVariables
->
-
 // @graphql-typegen auto-generated
 type CreateReviewMutationVariables = {
   episode: 'NEWHOPE' | 'EMPIRE' | 'JEDI',
diff --git a/test/graphql-typegen-async/useQueryNoFunctionTypeArguments.ts b/test/graphql-typegen-async/useQueryNoFunctionTypeArguments.ts
@@ -35,7 +35,7 @@ export const options = {
 export const expected = `
 // @flow
 import * as React from 'react'
-import { useQuery, type QueryRenderProps } from '@apollo/react-hooks'
+import { useQuery, type QueryResult } from '@apollo/react-hooks'
 import gql from 'graphql-tag'
 
 const query = gql\`
@@ -61,7 +61,7 @@ type TestQueryData = {
 }
 
 const Comp = ({id: string}): React.Node => {
-  const {loading, error, data}: QueryRenderProps<TestQueryData, TestQueryVariables> = useQuery(query, {
+  const {loading, error, data}: QueryResult<TestQueryData, TestQueryVariables> = useQuery(query, {
     variables: ({id}: TestQueryVariables),
   })
   return <div />
diff --git a/test/graphql-typegen-async/useSubscriptionModifications.ts b/test/graphql-typegen-async/useSubscriptionModifications.ts
@@ -78,12 +78,12 @@ type TestSubscriptionData = {
 }
 
 const Comp = ({episode}: {episode: Episode}): React.Node => {
-  const data: SubscriptionResult<
-    TestSubscriptionData,
-    TestSubscriptionVariables
-  > = useSubscription(subscription, {
-    variables: ({ episode }: TestSubscriptionVariables),
-  })
+  const data: SubscriptionResult<TestSubscriptionData> = useSubscription(
+    subscription,
+    {
+      variables: ({ episode }: TestSubscriptionVariables),
+    }
+  )
   return <div />
 }
 `
diff --git a/test/graphql-typegen-async/useSubscriptionNoFunctionTypeArguments.ts b/test/graphql-typegen-async/useSubscriptionNoFunctionTypeArguments.ts
@@ -66,12 +66,12 @@ type TestSubscriptionData = {
 }
 
 const Comp = ({episode}: {episode: Episode}): React.Node => {
-  const data: SubscriptionResult<
-    TestSubscriptionData,
-    TestSubscriptionVariables
-  > = useSubscription(subscription, {
-    variables: ({ episode }: TestSubscriptionVariables),
-  })
+  const data: SubscriptionResult<TestSubscriptionData> = useSubscription(
+    subscription,
+    {
+      variables: ({ episode }: TestSubscriptionVariables),
+    }
+  )
   return <div />
 }
 `

Original file line number	Diff line number	Diff line change
`@@ -338,7 +338,7 @@ export default function generateFlowTypesFromDocument({`
`338`	`338`	`variables = _variables`
`339`	`339`	`operationTypes.variables = _variables`
`340`	`340`	`}`
`341`		`- if (data && variables) {`
	`341`	`+ if (data && variables && !_config.useFunctionTypeArguments) {`
`342`	`342`	`const mutationFunction = statement([`
`343`	`343`	`type ${name}Function = ${MutationFunction()}<${data.id.name}${
`344`	`344`	variables ? `, ${variables.id.name}` : ''
Original file line number	Diff line number	Diff line change
`@@ -78,12 +78,12 @@ type TestSubscriptionData = {`
`78`	`78`	`}`
`79`	`79`
`80`	`80`	`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`	`+ )`
`87`	`87`	`return <div />`
`88`	`88`	`}`
`89`	`89`	`
Original file line number	Diff line number	Diff line change
`@@ -66,12 +66,12 @@ type TestSubscriptionData = {`
`66`	`66`	`}`
`67`	`67`
`68`	`68`	`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`	`+ )`
`75`	`75`	`return <div />`
`76`	`76`	`}`
`77`	`77`	`