@graphcommerce/react-hook-form 2.102.1

package/src/ComposedForm/types.ts

@@ -0,0 +1,85 @@
+import { ApolloError } from '@apollo/client'
+import { FieldValues, FormState, UseFormReturn } from 'react-hook-form'
+import { SetOptional } from 'type-fest'
+
+export type UseFormComposeOptions<V extends FieldValues = FieldValues> = {
+  /** The form that is used to submit */
+  form: UseFormReturn<V>
+  /** Method to submit the form */
+  submit: ReturnType<UseFormReturn<V>['handleSubmit']>
+
+  /** Identifier of the specific */
+  key: string
+  /**
+   * To submit multiple forms we need to define a sequence how the forms are structured so they can
+   * be submitted in that sequence.
+   *
+   * One form might depend on another form, so we first submit the first form, then the second, etc.
+   */
+  step: number
+}
+
+export type FormStateAll = Pick<
+  FormState<FieldValues>,
+  'isSubmitting' | 'isSubmitted' | 'isSubmitSuccessful' | 'isValid'
+>
+export type ButtonState = {
+  /** When the submit is called, isSubmit will be set to true */
+  isSubmitting: boolean
+  /** After the submission is done, isSubmitted is set to true */
+  isSubmitted: boolean
+  /** After the submission is successful, isSubmitSuccessful will be true */
+  isSubmitSuccessful: boolean
+}
+
+export type ComposedSubmitRenderComponentProps = {
+  submit: () => Promise<void>
+  buttonState: ButtonState
+  error?: ApolloError
+}
+
+export type ComposedFormState = {
+  forms: {
+    [step: number]: UseFormComposeOptions | SetOptional<UseFormComposeOptions, 'form' | 'submit'>
+  }
+  isCompleting: boolean
+  buttonState: ButtonState
+  formState: FormStateAll
+  submitted: boolean
+  error?: ApolloError
+}
+
+/** Register a new form with the useFormCompose hook */
+export type RegisterAction = {
+  type: 'REGISTER'
+} & Pick<UseFormComposeOptions, 'key' | 'step'>
+
+/** Assign the current state to the form */
+export type AssignAction = { type: 'ASSIGN' } & Omit<UseFormComposeOptions, 'step'>
+
+/** Cleanup the form if the useFromCompose hook changes */
+export type UnregisterAction = {
+  type: 'UNREGISTER'
+} & Pick<UseFormComposeOptions, 'key'>
+/** Recalculate the combined formstate */
+export type FormStateAction = { type: 'FORMSTATE' }
+/** Submit all forms and call onSubmitComplete?.() when done */
+export type SubmitAction = { type: 'SUBMIT' }
+export type SubmittingAction = { type: 'SUBMITTING' }
+export type SubmittedAction = { type: 'SUBMITTED'; isSubmitSuccessful: boolean }
+
+export type Actions =
+  | AssignAction
+  | RegisterAction
+  | UnregisterAction
+  | FormStateAction
+  | SubmitAction
+  | SubmittingAction
+  | SubmittedAction
+
+export type ComposedFormReducer = React.Reducer<ComposedFormState, Actions>
+
+export type ComposedFormContext = [
+  React.ReducerState<ComposedFormReducer>,
+  React.Dispatch<React.ReducerAction<ComposedFormReducer>>,
+]

package/src/ComposedForm/useFormCompose.ts

@@ -0,0 +1,36 @@
+import { useContext, useEffect } from 'react'
+import { FieldValues, UseFormReturn } from 'react-hook-form'
+import { isFormGqlOperation } from '../useFormGqlMutation'
+import { composedFormContext } from './context'
+import { UseFormComposeOptions } from './types'
+
+export function useFormCompose<V>(fields: UseFormComposeOptions<V>) {
+  const [state, dispatch] = useContext(composedFormContext)
+  const { form, key, step, submit } = fields
+
+  const { formState } = form
+
+  useEffect(() => {
+    dispatch({ type: 'REGISTER', key, step })
+    return () => dispatch({ type: 'UNREGISTER', key })
+  }, [dispatch, key, step])
+
+  useEffect(() => {
+    dispatch({ type: 'ASSIGN', key, form: form as UseFormReturn<FieldValues>, submit })
+  }, [dispatch, fields, form, key, submit])
+
+  const error = isFormGqlOperation(form) ? form.error : undefined
+
+  useEffect(() => {
+    dispatch({ type: 'FORMSTATE' })
+  }, [
+    dispatch,
+    formState.isSubmitSuccessful,
+    formState.isSubmitted,
+    formState.isSubmitting,
+    formState.isValid,
+    error,
+  ])
+
+  return state.formState
+}

package/src/diff.ts

@@ -0,0 +1,39 @@
+function isObject(val: unknown): val is Record<string, unknown> {
+  return typeof val === 'object' && val !== null
+}
+function isArray(val: unknown): val is unknown[] {
+  return Array.isArray(val)
+}
+
+/** Simple diff function, retuns the values of the second object. */
+export default function diff(item1: unknown, item2: unknown) {
+  const item1Type = typeof item2
+  const item2Type = typeof item2
+  const isSame = item1Type === item2Type
+
+  // If the types aren't the same we always have a diff
+  if (!isSame) return item2
+
+  if (isArray(item1) && isArray(item2)) {
+    const res = item1.map((val, idx) => diff(val, item2[idx])).filter((val) => !!val)
+    return res.length ? res : undefined
+  }
+
+  if (isObject(item1) && isObject(item2)) {
+    const entriesRight = Object.fromEntries(
+      Object.entries(item1)
+        .map(([key, val]) => [key, diff(val, item2[key])])
+        .filter((entry) => !!entry[1]),
+    )
+    const entriesLeft = Object.fromEntries(
+      Object.entries(item2)
+        .map(([key, val]) => [key, diff(item1[key], val)])
+        .filter((entry) => !!entry[1]),
+    )
+    const entries = { ...entriesRight, ...entriesLeft }
+
+    return Object.keys(entries).length ? entries : undefined
+  }
+
+  return item2 === item1 ? undefined : item2
+}

package/src/useFormAutoSubmit.tsx

@@ -0,0 +1,82 @@
+import { debounce } from '@material-ui/core'
+import { useCallback, useEffect, useState } from 'react'
+import { FieldPath, FieldValues, UseFormReturn } from 'react-hook-form'
+
+export type UseFormAutoSubmitOptions<TForm extends UseFormReturn<V>, V extends FieldValues> = {
+  /** Instance of current form */
+  form: Omit<TForm, 'handleSubmit'>
+  /** SubmitHandler */
+  submit: ReturnType<TForm['handleSubmit']>
+  /** Milliseconds to wait before updating */
+  wait?: number
+  /** Autosubmit only when these field names update */
+  fields?: FieldPath<V>[]
+
+  /**
+   * Forces the form to submit directly when it is valid, whithout user interaction. Please be aware
+   * that this may cause extra requests
+   */
+  forceInitialSubmit?: boolean
+}
+
+/**
+ * Make sure the form is set to { mode: 'onChange' }
+ *
+ * The form will automatically submit when:
+ *
+ * - The form is dirty (has modifications)
+ * - The form is valid (has no errors)
+ * - The form is not already submitting
+ * - The form is not currently validating
+ *
+ * Q: The form keeps submitting in loops: A: formState.isDirty should be false after submission Make
+ * sure that you call `reset(getValues())` after submission.
+ *
+ * @see useFormGqlMutation.tsx for an example implementation
+ *
+ * Q: How to I resubmit if the form is modified during the request?
+ *    formState.isDirty should be true after the submission
+ * @see useFormGqlMutation.tsx for an example implementation
+ */
+export function useFormAutoSubmit<Form extends UseFormReturn<V>, V = FieldValues>(
+  options: UseFormAutoSubmitOptions<Form, V>,
+) {
+  const { form, submit, wait = 500, fields, forceInitialSubmit } = options
+  const { formState } = form
+
+  const [submitting, setSubmitting] = useState(false)
+  const values = JSON.stringify(fields ? form.watch(fields) : form.watch())
+  const [oldValues, setOldValues] = useState<string>(values)
+
+  const canSubmit = formState.isValid && !formState.isSubmitting && !formState.isValidating
+  const force = formState.submitCount === 0 && forceInitialSubmit
+  const shouldSubmit = formState.isDirty && values !== oldValues
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const submitDebounced = useCallback(
+    debounce(async () => {
+      setSubmitting(true)
+
+      try {
+        await submit()
+      } catch (e) {
+        // We're not interested if the submission actually succeeds, that should be handled by the form itself.
+      }
+
+      setOldValues(values)
+      setSubmitting(false)
+    }, wait),
+    [submit],
+  )
+
+  useEffect(() => {
+    if (canSubmit && (force || shouldSubmit)) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      submitDebounced()
+      return submitDebounced.clear
+    }
+    return () => {}
+  }, [canSubmit, force, shouldSubmit, submitDebounced])
+
+  return submitting
+}

package/src/useFormGql.tsx

@@ -0,0 +1,73 @@
+import {
+  FetchResult,
+  ApolloClient,
+  TypedDocumentNode,
+  useApolloClient,
+  MutationTuple,
+  ApolloError,
+} from '@apollo/client'
+import { UseFormProps, UseFormReturn, UnpackNestedValue, DeepPartial } from 'react-hook-form'
+import diff from './diff'
+import { useGqlDocumentHandler, UseGqlDocumentHandler } from './useGqlDocumentHandler'
+import { LazyQueryTuple } from './useLazyQueryPromise'
+
+export type OnCompleteFn<Q> = (
+  data: FetchResult<Q>,
+  client: ApolloClient<unknown>,
+) => void | Promise<void>
+
+type UseFormGraphQLCallbacks<Q, V> = {
+  onBeforeSubmit?: (variables: V) => V | Promise<V>
+  onComplete?: OnCompleteFn<Q>
+}
+
+export type UseFormGraphQlOptions<Q, V> = UseFormProps<V> & UseFormGraphQLCallbacks<Q, V>
+
+export type UseFormGqlMethods<Q, V> = Omit<UseGqlDocumentHandler<V>, 'encode' | 'type'> &
+  Pick<UseFormReturn<V>, 'handleSubmit'> & { data?: Q | null; error?: ApolloError }
+
+/**
+ * Combines useMutation/useLazyQueryPromise with react-hook-form's useForm:
+ *
+ * - Automatically extracts all required arguments for a query
+ * - Casts Float/Int mutation input variables to a Number
+ * - Updates the form when the query updates
+ * - Resets the form after submitting the form when no modifications are found
+ */
+export function useFormGql<Q, V>(
+  options: {
+    document: TypedDocumentNode<Q, V>
+    form: UseFormReturn<V>
+    tuple: MutationTuple<Q, V> | LazyQueryTuple<Q, V>
+    defaultValues?: UseFormProps<V>['defaultValues']
+  } & UseFormGraphQLCallbacks<Q, V>,
+): UseFormGqlMethods<Q, V> {
+  const { onComplete, onBeforeSubmit, document, form, tuple, defaultValues } = options
+  const { encode, type, ...gqlDocumentHandler } = useGqlDocumentHandler<Q, V>(document)
+  const [execute, { data, error }] = tuple
+  const client = useApolloClient()
+
+  const handleSubmit: UseFormReturn<V>['handleSubmit'] = (onValid, onInvalid) =>
+    form.handleSubmit(async (formValues, event) => {
+      // Combine defaults with the formValues and encode
+      let variables = encode({
+        ...defaultValues,
+        ...(formValues as Record<string, unknown>),
+      })
+
+      // Wait for the onBeforeSubmit to complete
+      if (onBeforeSubmit) variables = await onBeforeSubmit(variables)
+
+      const result = await execute({ variables })
+      if (onComplete && result.data) await onComplete(result, client)
+
+      // Reset the state of the form if it is unmodified afterwards
+      if (typeof diff(form.getValues(), formValues) === 'undefined')
+        form.reset(formValues as UnpackNestedValue<DeepPartial<V>>)
+
+      // @ts-expect-error For some reason it is not accepting the value here
+      await onValid(formValues, event)
+    }, onInvalid)
+
+  return { ...gqlDocumentHandler, handleSubmit, data, error }
+}

package/src/useFormGqlMutation.tsx

@@ -0,0 +1,39 @@
+import { MutationHookOptions, TypedDocumentNode, useMutation } from '@apollo/client'
+import { useForm, UseFormReturn } from 'react-hook-form'
+import { useFormGql, UseFormGqlMethods, UseFormGraphQlOptions } from './useFormGql'
+import { useFormMuiRegister, UseMuiFormRegister } from './useFormMuiRegister'
+import { useFormValidFields, UseFormValidReturn } from './useFormValidFields'
+
+export type UseFormGqlMutationReturn<
+  Q extends Record<string, any> = Record<string, any>,
+  V extends Record<string, any> = Record<string, any>
+> = UseFormGqlMethods<Q, V> &
+  UseFormReturn<V> & { muiRegister: UseMuiFormRegister<V>; valid: UseFormValidReturn<V> }
+
+export function isFormGqlOperation<V, Q = Record<string, unknown>>(
+  form: UseFormReturn<V>,
+): form is UseFormGqlMutationReturn<Q, V> {
+  return typeof (form as UseFormGqlMutationReturn<Q, V>).muiRegister === 'function'
+}
+
+export function assertFormGqlOperation<V, Q = Record<string, unknown>>(
+  form: UseFormReturn<V>,
+): asserts form is UseFormGqlMutationReturn<Q, V> {
+  if (typeof (form as UseFormGqlMutationReturn<Q, V>).muiRegister !== 'function') {
+    throw Error(`form must be one of 'useFromGqlMutation' or 'useFormGqlQuery'`)
+  }
+}
+
+export function useFormGqlMutation<Q, V>(
+  document: TypedDocumentNode<Q, V>,
+  options: UseFormGraphQlOptions<Q, V> = {},
+  operationOptions?: MutationHookOptions<Q, V>,
+): UseFormGqlMutationReturn<Q, V> {
+  const form = useForm<V>(options)
+  const tuple = useMutation(document, operationOptions)
+  const operation = useFormGql({ document, form, tuple, ...options })
+  const muiRegister = useFormMuiRegister(form)
+  const valid = useFormValidFields(form, operation.required)
+
+  return { ...form, ...operation, valid, muiRegister }
+}

package/src/useFormGqlQuery.tsx

@@ -0,0 +1,23 @@
+import { LazyQueryHookOptions, TypedDocumentNode } from '@apollo/client'
+import { useForm } from 'react-hook-form'
+import { useFormGql, UseFormGraphQlOptions } from './useFormGql'
+import { UseFormGqlMutationReturn } from './useFormGqlMutation'
+import { useFormMuiRegister } from './useFormMuiRegister'
+import { useFormValidFields } from './useFormValidFields'
+import { useLazyQueryPromise } from './useLazyQueryPromise'
+
+export type UseFormGqlQueryReturn<Q, V> = UseFormGqlMutationReturn<Q, V>
+
+export function useFormGqlQuery<Q, V>(
+  document: TypedDocumentNode<Q, V>,
+  options: UseFormGraphQlOptions<Q, V> = {},
+  operationOptions?: LazyQueryHookOptions<Q, V>,
+): UseFormGqlQueryReturn<Q, V> {
+  const form = useForm<V>(options)
+  const tuple = useLazyQueryPromise(document, operationOptions)
+  const operation = useFormGql({ document, form, tuple, ...options })
+  const muiRegister = useFormMuiRegister(form)
+  const valid = useFormValidFields(form, operation.required)
+
+  return { ...form, ...operation, valid, muiRegister }
+}

package/src/useFormMuiRegister.tsx

@@ -0,0 +1,22 @@
+import {
+  FieldValues,
+  FieldPath,
+  RegisterOptions,
+  UseFormRegisterReturn,
+  UseFormReturn,
+} from 'react-hook-form'
+
+export type UseMuiFormRegister<TFieldValues extends FieldValues> = <
+  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>(
+  name: TFieldName,
+  options?: RegisterOptions<TFieldValues, TFieldName>,
+) => Omit<UseFormRegisterReturn, 'ref'> & { inputRef: UseFormRegisterReturn['ref'] }
+
+export function useFormMuiRegister<V>({ register }: Pick<UseFormReturn<V>, 'register'>) {
+  const muiRegister: UseMuiFormRegister<V> = (name, opts) => {
+    const { ref: inputRef, ...fields } = register(name, opts)
+    return { ...fields, inputRef }
+  }
+  return muiRegister
+}

package/src/useFormPersist.tsx

@@ -0,0 +1,71 @@
+import { useEffect } from 'react'
+import {
+  FieldValues,
+  UseFormReturn,
+  Path,
+  FieldPathValue,
+  UnpackNestedValue,
+} from 'react-hook-form'
+
+export type UseFormPersistOptions<V> = {
+  /** Instance of current form */
+  form: UseFormReturn<V>
+
+  /** Name of the key how it will be stored in the storage. */
+  name: string
+
+  /**
+   * SessionStorage: Will not be avaiable when the user returns later (recommended). localStorage:
+   * Will be available when the user returns later.
+   */
+  storage?: 'sessionStorage' | 'localStorage'
+
+  exclude?: string[]
+}
+
+/**
+ * Will persist any dirty fields and store it in the sessionStorage/localStorage Will restory any
+ * dirty fields when the form is initialized
+ */
+export function useFormPersist<V>(options: UseFormPersistOptions<V>) {
+  const { form, name, storage = 'sessionStorage', exclude = [] } = options
+  const { setValue, watch, formState } = form
+
+  const dirtyFieldKeys = Object.keys(formState.dirtyFields) as Path<V>[]
+  const valuesJson = JSON.stringify(
+    Object.fromEntries(
+      dirtyFieldKeys.filter((f) => !exclude.includes(f)).map((field) => [field, watch(field)]),
+    ),
+  )
+
+  // Restore changes
+  useEffect(() => {
+    try {
+      if (typeof window === 'undefined') return
+      const storedFormStr = window[storage][name]
+      if (!storedFormStr) return
+
+      const storedValues = JSON.parse(storedFormStr) as FieldValues
+      if (storedValues) {
+        const entries = Object.entries(storedValues) as [
+          Path<V>,
+          UnpackNestedValue<FieldPathValue<V, Path<V>>>,
+        ][]
+        entries.forEach((entry) => setValue(...entry, { shouldDirty: true, shouldValidate: true }))
+      }
+    } catch {
+      //
+    }
+  }, [name, setValue, storage])
+
+  // Watch for changes
+  useEffect(() => {
+    try {
+      if (typeof window === 'undefined') return
+      if (valuesJson !== '{}') window[storage][name] = valuesJson
+      else delete window[storage][name]
+    } catch {
+      //
+    }
+  }, [name, storage, valuesJson])
+}

package/src/useFormValidFields.tsx

@@ -0,0 +1,23 @@
+import { FieldValues, Path, UseFormReturn } from 'react-hook-form'
+import { IsRequired } from './useGqlDocumentHandler'
+
+export type UseFormValidReturn<TFieldValues> = Partial<Record<Path<TFieldValues>, boolean>>
+
+/**
+ * ### useFormValidFields
+ *
+ * Record field names as key and boolean as value indicating whether the field is valid
+ */
+export function useFormValidFields<TFieldValues extends FieldValues>(
+  form: Pick<UseFormReturn<TFieldValues>, 'watch' | 'formState'>,
+  required: IsRequired<TFieldValues>,
+): UseFormValidReturn<TFieldValues> {
+  const { watch, formState } = form
+  const fields: Partial<Record<Path<TFieldValues>, boolean>> = {}
+
+  Object.keys(required).forEach((key) => {
+    fields[key] = !formState.errors[key] && watch(key as Path<TFieldValues>)
+  })
+
+  return fields
+}

package/src/useGqlDocumentHandler.tsx

@@ -0,0 +1,151 @@
+import { TypedDocumentNode } from '@apollo/client'
+import {
+  DefinitionNode,
+  OperationDefinitionNode,
+  ValueNode,
+  NullValueNode,
+  ObjectValueNode,
+  ListValueNode,
+  VariableNode,
+  VariableDefinitionNode,
+  TypeNode,
+  ListTypeNode,
+  NamedTypeNode,
+  NonNullTypeNode,
+  OperationTypeNode,
+} from 'graphql'
+import { useMemo } from 'react'
+import { FieldValues } from 'react-hook-form'
+import { LiteralUnion } from 'type-fest'
+
+type Scalars = {
+  ID: string
+  String: string
+  Boolean: boolean
+  Int: number
+  Float: number
+}
+
+function isOperationDefinition(
+  node: DefinitionNode | OperationDefinitionNode,
+): node is OperationDefinitionNode {
+  return (node as OperationDefinitionNode).variableDefinitions !== undefined
+}
+
+type WithValueNode = Exclude<
+  ValueNode,
+  NullValueNode | ObjectValueNode | ListValueNode | VariableNode
+>
+
+function isWithValueNode(value: ValueNode | WithValueNode): value is WithValueNode {
+  return (value as WithValueNode).value !== undefined
+}
+
+export type OptionalKeys<T> = { [k in keyof T]-?: undefined extends T[k] ? never : k }[keyof T]
+
+export type IsRequired<V> = {
+  [k in keyof V]-?: undefined extends V[k] ? false : true
+}
+
+export type DeepIsRequired<V> = {
+  [k in keyof V]-?: undefined extends V[k]
+    ? false
+    : V[k] extends Record<string, unknown>
+    ? DeepIsRequired<V[k]>
+    : true
+}
+
+type DeepStringify<V> = {
+  [k in keyof V]?: V[k] extends (infer U)[]
+    ? string[]
+    : V[k] extends Record<string, unknown>
+    ? DeepStringify<V[k]>
+    : string
+}
+
+type FieldTypes = LiteralUnion<keyof Scalars, string> | FieldTypes[]
+
+function variableType<T extends TypeNode>(type: T): FieldTypes {
+  if (type.kind === 'ListType') {
+    return [variableType(type.type)]
+  }
+  if (type.kind === 'NonNullType') {
+    return variableType(type.type)
+  }
+
+  return type.name.value as keyof Scalars
+}
+
+export type UseGqlDocumentHandler<V extends FieldValues> = {
+  type: OperationTypeNode | undefined
+  required: IsRequired<V>
+  defaultVariables: Partial<Pick<V, OptionalKeys<V>>>
+  encode: (
+    variables: { [k in keyof V]?: DeepStringify<V[k]> },
+    enc?: { [k in keyof V]: FieldTypes },
+  ) => V
+}
+
+export function handlerFactory<Q, V>(document: TypedDocumentNode<Q, V>): UseGqlDocumentHandler<V> {
+  type Defaults = Partial<Pick<V, OptionalKeys<V>>>
+  type Encoding = { [k in keyof V]: FieldTypes }
+  type Required = IsRequired<V>
+  let requiredPartial: Partial<Required> = {}
+  let encodingPartial: Partial<Encoding> = {}
+  let defaultVariables: Defaults = {}
+  let type: OperationTypeNode | undefined
+
+  document.definitions.forEach((definition) => {
+    if (!isOperationDefinition(definition)) return
+    if (!definition.variableDefinitions) return
+
+    type = definition.operation
+    definition.variableDefinitions.forEach((variable: VariableDefinitionNode) => {
+      const name = variable.variable.name.value as keyof V
+
+      requiredPartial = { ...requiredPartial, [name]: variable.type.kind === 'NonNullType' }
+      encodingPartial = { ...encodingPartial, [name]: variableType(variable.type) }
+
+      if (variable.defaultValue && isWithValueNode(variable.defaultValue)) {
+        defaultVariables = {
+          ...defaultVariables,
+          [name]: variable.defaultValue.value as unknown as Defaults[keyof Defaults],
+        }
+      }
+    })
+  })
+
+  const required = requiredPartial as Required
+  const encoding = encodingPartial as Encoding
+
+  function heuristicEncode(val: string) {
+    if (Number(val).toString() === val) return Number(val)
+    if (val === 'true') return true
+    if (val === 'false') return false
+    return val
+  }
+
+  function encodeItem(enc: FieldTypes, val: unknown) {
+    if (Array.isArray(enc)) return [encodeItem(enc[0], val)]
+    if (val && typeof val === 'object') {
+      return Object.fromEntries(Object.entries(val).map(([key, v]) => [key, heuristicEncode(v)]))
+    }
+    if (enc === 'Boolean') return Boolean(val)
+    if (enc === 'Float' || enc === 'Int') return Number(val)
+    return val
+  }
+
+  function encode(variables: { [k in keyof V]?: DeepStringify<V[k]> }, enc = encoding) {
+    return Object.fromEntries(
+      Object.entries(variables).map(([key, val]) => [key, encodeItem(enc[key], val)]),
+    ) as V
+  }
+
+  return { type, required, defaultVariables, encode }
+}
+
+export function useGqlDocumentHandler<Q, V>(
+  document: TypedDocumentNode<Q, V>,
+): UseGqlDocumentHandler<V> {
+  return useMemo(() => handlerFactory<Q, V>(document), [document])
+}