Fix: Pass through GraphQL operation variable type (redwoodjs#3497)

Co-authored-by: Daniel Choudhury <[email protected]>
cuongducle · Oct 22, 2021 · 1b21f68 · 1b21f68
1 parent a1c6663
commit 1b21f68
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 25 deletions.
diff --git a/packages/web/src/apollo/typeOverride.ts b/packages/web/src/apollo/typeOverride.ts
@@ -4,16 +4,20 @@ import type {
   QueryResult,
   MutationHookOptions,
   MutationTuple,
+  OperationVariables,
 } from '@apollo/client'
 
 // @MARK: Override relevant types from Apollo here
 declare global {
-  interface QueryOperationResult extends QueryResult {}
+  interface QueryOperationResult<TData = any, TVariables = OperationVariables>
+    extends QueryResult<TData, TVariables> {}
   interface MutationOperationResult<TData, TVariables>
     extends MutationTuple<TData, TVariables> {}
 
-  interface GraphQLQueryHookOptions extends QueryHookOptions {}
-  interface GraphQLMutationHookOptions extends MutationHookOptions {}
+  interface GraphQLQueryHookOptions<TData, TVariables>
+    extends QueryHookOptions<TData, TVariables> {}
+  interface GraphQLMutationHookOptions<TData, TVariables>
+    extends MutationHookOptions<TData, TVariables> {}
 }
 
 export {}
diff --git a/packages/web/src/components/GraphQLHooksProvider.tsx b/packages/web/src/components/GraphQLHooksProvider.tsx
@@ -1,14 +1,20 @@
 import type { DocumentNode } from 'graphql'
 
-type DefaultUseQueryType = (
+type DefaultUseQueryType = <
+  TData = any,
+  TVariables = GraphQLOperationVariables
+>(
   query: DocumentNode,
-  options?: GraphQLQueryHookOptions
-) => QueryOperationResult
+  options?: GraphQLQueryHookOptions<TData, TVariables>
+) => QueryOperationResult<TData, TVariables>
 
-type DefaultUseMutationType = (
+type DefaultUseMutationType = <
+  TData = any,
+  TVariables = GraphQLOperationVariables
+>(
   mutation: DocumentNode,
-  options?: GraphQLMutationHookOptions
-) => MutationOperationResult
+  options?: GraphQLMutationHookOptions<TData, TVariables>
+) => MutationOperationResult<TData, TVariables>
 export interface GraphQLHooks<
   TuseQuery = DefaultUseQueryType,
   TuseMutation = DefaultUseMutationType
@@ -64,16 +70,25 @@ export const GraphQLHooksProvider = <
   )
 }
 
-export function useQuery<TData = any>(
+export function useQuery<TData = any, TVariables = GraphQLOperationVariables>(
   query: DocumentNode,
-  options?: GraphQLQueryHookOptions
-): QueryOperationResult<TData> {
-  return React.useContext(GraphQLHooksContext).useQuery(query, options)
+  options?: GraphQLQueryHookOptions<TData, TVariables>
+): QueryOperationResult<TData, TVariables> {
+  return React.useContext(GraphQLHooksContext).useQuery<TData, TVariables>(
+    query,
+    options
+  )
 }
 
-export function useMutation<TData = any>(
+export function useMutation<
+  TData = any,
+  TVariables = GraphQLOperationVariables
+>(
   mutation: DocumentNode,
-  options?: GraphQLMutationHookOptions
-): MutationOperationResult<TData> {
-  return React.useContext(GraphQLHooksContext).useMutation(mutation, options)
+  options?: GraphQLMutationHookOptions<TData, TVariables>
+): MutationOperationResult<TData, TVariables> {
+  return React.useContext(GraphQLHooksContext).useMutation<TData, TVariables>(
+    mutation,
+    options
+  )
 }
diff --git a/packages/web/src/global.web-auto-imports.ts b/packages/web/src/global.web-auto-imports.ts
@@ -19,27 +19,33 @@ declare global {
     __REDWOOD__APP_TITLE: string
   }
 
+  type GraphQLOperationVariables = Record<string, any>
+
+  /* eslint-disable @typescript-eslint/no-unused-vars */
   // Overridable graphQL hook return types
-  interface QueryOperationResult<TData = any> {
+  interface QueryOperationResult<
+    TData = any,
+    TVariables = GraphQLOperationVariables
+  > {
     data: TData | undefined
     loading: boolean
     // @MARK not adding error here, as it gets overriden by type overrides
     // see packages/web/src/apollo/typeOverride.ts
   }
 
   // not defining it here, because it gets overriden by Apollo provider anyway
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  interface MutationOperationResult<TData = any, TVariables = any> {}
+  interface MutationOperationResult<TData, TVariables> {}
 
   // Overridable useQuery and useMutation hooks
-  interface GraphQLQueryHookOptions {
-    variables?: Record<string, any>
+  interface GraphQLQueryHookOptions<TData, TVariables> {
+    variables?: TVariables
     [key: string]: any
   }
 
-  export interface GraphQLMutationHookOptions {
-    variables?: Record<string, any>
-    onCompleted?: (data: any) => void
+  export interface GraphQLMutationHookOptions<TData, TVariables> {
+    variables?: TVariables
+    onCompleted?: (data: TData) => void
     [key: string]: any
   }
+  /* eslint-enable @typescript-eslint/no-unused-vars */
 }