fix(core/bindings): Fix conditional/optional variables type based on TypedDocumentNode generic

.changeset/slimy-shirts-bow.md

@@ -0,0 +1,8 @@
+---
+'@urql/preact': patch
+'@urql/svelte': patch
+'urql': patch
+'@urql/vue': patch
+---
+
+Fix type utilities turning the `variables` properties optional when a type from `TypedDocumentNode` has no `Variables` or all optional `Variables`. Previously this would break for wrappers, e.g. in code generators, or when the type didn't quite match what we'd expect.

.changeset/tricky-ears-add.md

@@ -0,0 +1,5 @@
+---
+'@urql/core': patch
+---
+
+Expose consistent `GraphQLRequestParams` utility type from which `GraphQLRequest`s are created in all bindings.

packages/core/src/types.ts

@@ -238,6 +238,43 @@ export interface GraphQLRequest<
   variables: Variables;
 }
 
+/** Parameters from which {@link GraphQLRequest | GraphQLRequests} are created from.
+ *
+ * @remarks
+ * A `GraphQLRequest` is a single executable request with a generated `key` to identify
+ * their results, whereas `GraphQLRequestParams` is a utility type used to generate
+ * inputs for `urql` to create requests from, i.e. it only contains a `query` and
+ * `variables`. The type conditionally makes the `variables` property completely
+ * optional.
+ *
+ * @privateRemarks
+ * The wrapping union type is needed for passthrough or wrapper utilities that wrap
+ * functions like `useQuery` with generics.
+ */
+export type GraphQLRequestParams<
+  Data = any,
+  Variables extends AnyVariables = AnyVariables
+> =
+  | ({
+      query: string | DocumentNode | TypedDocumentNode<Data, Variables>;
+    } & (Variables extends void
+      ? {
+          variables?: Variables;
+        }
+      : Variables extends {
+          [P in keyof Variables]: Exclude<Variables[P], null | void>;
+        }
+      ? {
+          variables: Variables;
+        }
+      : {
+          variables?: Variables;
+        }))
+  | {
+      query: string | DocumentNode | TypedDocumentNode<Data, Variables>;
+      variables: Variables;
+    };
+
 /** Metadata used to annotate an `Operation` in development for the `urql-devtools`.
  *
  * @remarks

packages/preact-urql/src/hooks/useQuery.ts

@@ -1,4 +1,3 @@
-import { DocumentNode } from 'graphql';
 import { useEffect, useCallback, useMemo } from 'preact/hooks';
 
 import {
@@ -15,8 +14,8 @@ import {
 
 import {
   Client,
+  GraphQLRequestParams,
   AnyVariables,
-  TypedDocumentNode,
   CombinedError,
   OperationContext,
   RequestPolicy,
@@ -33,19 +32,10 @@ export type UseQueryArgs<
   Variables extends AnyVariables = AnyVariables,
   Data = any
 > = {
-  query: string | DocumentNode | TypedDocumentNode<Data, Variables>;
   requestPolicy?: RequestPolicy;
   context?: Partial<OperationContext>;
   pause?: boolean;
-} & (Variables extends void
-  ? {
-      variables?: Variables;
-    }
-  : Variables extends { [P in keyof Variables]: Variables[P] | null }
-  ? { variables?: Variables }
-  : {
-      variables: Variables;
-    });
+} & GraphQLRequestParams<Data, Variables>;
 
 export interface UseQueryState<
   Data = any,

packages/preact-urql/src/hooks/useSubscription.ts

@@ -1,10 +1,9 @@
-import { DocumentNode } from 'graphql';
 import { useEffect, useCallback, useRef, useMemo } from 'preact/hooks';
 import { pipe, concat, fromValue, switchMap, map, scan } from 'wonka';
 
 import {
   AnyVariables,
-  TypedDocumentNode,
+  GraphQLRequestParams,
   CombinedError,
   OperationContext,
   Operation,
@@ -19,18 +18,9 @@ export type UseSubscriptionArgs<
   Variables extends AnyVariables = AnyVariables,
   Data = any
 > = {
-  query: DocumentNode | TypedDocumentNode<Data, Variables> | string;
   pause?: boolean;
   context?: Partial<OperationContext>;
-} & (Variables extends void
-  ? {
-      variables?: Variables;
-    }
-  : Variables extends { [P in keyof Variables]: Variables[P] | null }
-  ? { variables?: Variables }
-  : {
-      variables: Variables;
-    });
+} & GraphQLRequestParams<Data, Variables>;
 
 export type SubscriptionHandler<T, R> = (prev: R | undefined, data: T) => R;
 

packages/react-urql/src/hooks/useQuery.ts

@@ -1,13 +1,12 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 
-import { DocumentNode } from 'graphql';
 import { Source, pipe, subscribe, onEnd, onPush, takeWhile } from 'wonka';
 import { useState, useEffect, useCallback, useMemo } from 'react';
 
 import {
+  GraphQLRequestParams,
   AnyVariables,
   Client,
-  TypedDocumentNode,
   CombinedError,
   OperationContext,
   RequestPolicy,
@@ -24,19 +23,10 @@ export type UseQueryArgs<
   Variables extends AnyVariables = AnyVariables,
   Data = any
 > = {
-  query: string | DocumentNode | TypedDocumentNode<Data, Variables>;
   requestPolicy?: RequestPolicy;
   context?: Partial<OperationContext>;
   pause?: boolean;
-} & (Variables extends void
-  ? {
-      variables?: Variables;
-    }
-  : Variables extends { [P in keyof Variables]: Variables[P] | null }
-  ? { variables?: Variables }
-  : {
-      variables: Variables;
-    });
+} & GraphQLRequestParams<Data, Variables>;
 
 export interface UseQueryState<
   Data = any,

packages/react-urql/src/hooks/useSubscription.ts

@@ -1,12 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 
-import { DocumentNode } from 'graphql';
 import { pipe, subscribe, onEnd } from 'wonka';
 import { useEffect, useState, useCallback, useMemo, useRef } from 'react';
 
 import {
+  GraphQLRequestParams,
   AnyVariables,
-  TypedDocumentNode,
   CombinedError,
   OperationContext,
   Operation,
@@ -20,18 +19,9 @@ export type UseSubscriptionArgs<
   Variables extends AnyVariables = AnyVariables,
   Data = any
 > = {
-  query: DocumentNode | TypedDocumentNode<Data, Variables> | string;
   pause?: boolean;
   context?: Partial<OperationContext>;
-} & (Variables extends void
-  ? {
-      variables?: Variables;
-    }
-  : Variables extends { [P in keyof Variables]: Variables[P] | null }
-  ? { variables?: Variables }
-  : {
-      variables: Variables;
-    });
+} & GraphQLRequestParams<Data, Variables>;
 
 export type SubscriptionHandler<T, R> = (prev: R | undefined, data: T) => R;
 

packages/svelte-urql/src/mutationStore.ts

@@ -1,13 +1,13 @@
-import type { DocumentNode } from 'graphql';
+import { pipe, map, scan, subscribe } from 'wonka';
+import { derived, writable } from 'svelte/store';
+
 import {
   AnyVariables,
+  GraphQLRequestParams,
   Client,
   OperationContext,
-  TypedDocumentNode,
   createRequest,
 } from '@urql/core';
-import { pipe, map, scan, subscribe } from 'wonka';
-import { derived, writable } from 'svelte/store';
 
 import {
   OperationResultState,
@@ -22,17 +22,8 @@ export type MutationArgs<
   Variables extends AnyVariables = AnyVariables
 > = {
   client: Client;
-  query: string | DocumentNode | TypedDocumentNode<Data, Variables>;
   context?: Partial<OperationContext>;
-} & (Variables extends void
-  ? {
-      variables?: Variables;
-    }
-  : Variables extends { [P in keyof Variables]: Variables[P] | null }
-  ? { variables?: Variables }
-  : {
-      variables: Variables;
-    });
+} & GraphQLRequestParams<Data, Variables>;
 
 export function mutationStore<
   Data = any,

packages/svelte-urql/src/queryStore.ts

@@ -1,12 +1,12 @@
-import type { DocumentNode } from 'graphql';
 import {
   Client,
+  GraphQLRequestParams,
   AnyVariables,
   OperationContext,
-  TypedDocumentNode,
   RequestPolicy,
   createRequest,
 } from '@urql/core';
+
 import {
   Source,
   pipe,
@@ -18,6 +18,7 @@ import {
   scan,
   never,
 } from 'wonka';
+
 import { derived, writable } from 'svelte/store';
 
 import {
@@ -34,19 +35,10 @@ export type QueryArgs<
   Variables extends AnyVariables = AnyVariables
 > = {
   client: Client;
-  query: string | DocumentNode | TypedDocumentNode<Data, Variables>;
   context?: Partial<OperationContext>;
   requestPolicy?: RequestPolicy;
   pause?: boolean;
-} & (Variables extends void
-  ? {
-      variables?: Variables;
-    }
-  : Variables extends { [P in keyof Variables]: Variables[P] | null }
-  ? { variables?: Variables }
-  : {
-      variables: Variables;
-    });
+} & GraphQLRequestParams<Data, Variables>;
 
 export function queryStore<
   Data = any,

packages/svelte-urql/src/subscriptionStore.ts

@@ -1,11 +1,11 @@
-import type { DocumentNode } from 'graphql';
 import {
   AnyVariables,
+  GraphQLRequestParams,
   Client,
   OperationContext,
-  TypedDocumentNode,
   createRequest,
 } from '@urql/core';
+
 import {
   Source,
   pipe,
@@ -17,6 +17,7 @@ import {
   scan,
   never,
 } from 'wonka';
+
 import { derived, writable } from 'svelte/store';
 
 import {
@@ -33,18 +34,9 @@ export type SubscriptionArgs<
   Variables extends AnyVariables = AnyVariables
 > = {
   client: Client;
-  query: string | DocumentNode | TypedDocumentNode<Data, Variables>;
   context?: Partial<OperationContext>;
   pause?: boolean;
-} & (Variables extends void
-  ? {
-      variables?: Variables;
-    }
-  : Variables extends { [P in keyof Variables]: Variables[P] | null }
-  ? { variables?: Variables }
-  : {
-      variables: Variables;
-    });
+} & GraphQLRequestParams<Data, Variables>;
 
 export function subscriptionStore<
   Data,