fix component typing

urql-graphql · Sep 2, 2022 · cdfb222 · cdfb222
1 parent bfb9988
commit cdfb222
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 12 deletions.
diff --git a/.changeset/selfish-wolves-poke.md b/.changeset/selfish-wolves-poke.md
@@ -0,0 +1,6 @@
+---
+'@urql/preact': patch
+'urql': patch
+---
+
+Update generics for components
diff --git a/packages/preact-urql/src/components/Mutation.ts b/packages/preact-urql/src/components/Mutation.ts
@@ -26,9 +26,10 @@ export interface MutationState<
   ) => Promise<OperationResult<Data, Variables>>;
 }
 
-export function Mutation<Data = any, Variables = any>(
-  props: MutationProps<Data, Variables>
-): VNode<any> {
+export function Mutation<
+  Data = any,
+  Variables extends AnyVariables = AnyVariables
+>(props: MutationProps<Data, Variables>): VNode<any> {
   const mutation = useMutation<Data, Variables>(props.query);
   return props.children({ ...mutation[0], executeMutation: mutation[1] });
 }
diff --git a/packages/preact-urql/src/components/Query.ts b/packages/preact-urql/src/components/Query.ts
@@ -16,9 +16,10 @@ export interface QueryState<
   executeQuery: (opts?: Partial<OperationContext>) => void;
 }
 
-export function Query<Data = any, Variables = any>(
-  props: QueryProps<Data, Variables>
-): VNode<any> {
+export function Query<
+  Data = any,
+  Variables extends AnyVariables = AnyVariables
+>(props: QueryProps<Data, Variables>): VNode<any> {
   const query = useQuery<Data, Variables>(props);
   return props.children({ ...query[0], executeQuery: query[1] });
 }
diff --git a/packages/react-urql/src/components/Mutation.ts b/packages/react-urql/src/components/Mutation.ts
@@ -26,9 +26,10 @@ export interface MutationState<
   ) => Promise<OperationResult<Data, Variables>>;
 }
 
-export function Mutation<Data = any, Variables = any>(
-  props: MutationProps<Data, Variables>
-): ReactElement<any> {
+export function Mutation<
+  Data = any,
+  Variables extends AnyVariables = AnyVariables
+>(props: MutationProps<Data, Variables>): ReactElement<any> {
   const mutation = useMutation<Data, Variables>(props.query);
   return props.children({ ...mutation[0], executeMutation: mutation[1] });
 }
diff --git a/packages/react-urql/src/components/Query.ts b/packages/react-urql/src/components/Query.ts
@@ -16,9 +16,10 @@ export interface QueryState<
   executeQuery: (opts?: Partial<OperationContext>) => void;
 }
 
-export function Query<Data = any, Variables = any>(
-  props: QueryProps<Data, Variables>
-): ReactElement<any> {
+export function Query<
+  Data = any,
+  Variables extends AnyVariables = AnyVariables
+>(props: QueryProps<Data, Variables>): ReactElement<any> {
   const query = useQuery<Data, Variables>(props);
   return props.children({ ...query[0], executeQuery: query[1] });
 }