@wilshop/dashboard 3.5.2

package/src/lib/framework/page/use-detail-page.ts

@@ -0,0 +1,341 @@
+import { removeReadonlyAndLocalizedCustomFields } from '@/vdb/lib/utils.js';
+import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import {
+    DefinedInitialDataOptions,
+    queryOptions,
+    useMutation,
+    useQueryClient,
+    useSuspenseQuery,
+} from '@tanstack/react-query';
+import { ResultOf, VariablesOf } from 'gql.tada';
+import { DocumentNode } from 'graphql';
+import { FormEvent } from 'react';
+import { UseFormReturn } from 'react-hook-form';
+
+import { NEW_ENTITY_PATH } from '../../constants.js';
+import { api } from '../../graphql/api.js';
+import { useCustomFieldConfig } from '../../hooks/use-custom-field-config.js';
+import { useExtendedDetailQuery } from '../../hooks/use-extended-detail-query.js';
+import { addCustomFields } from '../document-introspection/add-custom-fields.js';
+import {
+    getEntityName,
+    getMutationName,
+    getQueryName,
+} from '../document-introspection/get-document-structure.js';
+import { useGeneratedForm, WithLooseCustomFields } from '../form-engine/use-generated-form.js';
+
+import { DetailEntityPath } from './page-types.js';
+
+// Utility type to remove null from a type union
+type RemoveNull<T> = T extends null ? never : T;
+
+type RemoveNullFields<T> = {
+    [K in keyof T]: RemoveNull<T[K]>;
+};
+
+const NEW_ENTITY_ID = '__NEW__';
+
+/**
+ * @description
+ * Options used to configure the result of the `useDetailPage` hook.
+ *
+ * @docsCategory detail-views
+ * @docsPage useDetailPage
+ * @since 3.3.0
+ */
+export interface DetailPageOptions<
+    T extends TypedDocumentNode<any, any>,
+    C extends TypedDocumentNode<any, any>,
+    U extends TypedDocumentNode<any, any>,
+    EntityField extends keyof ResultOf<T> = DetailEntityPath<T>,
+    VarNameCreate extends keyof VariablesOf<C> = 'input',
+    VarNameUpdate extends keyof VariablesOf<U> = 'input',
+> {
+    /**
+     * @description
+     * The page id. This is optional, but if provided, it will be used to
+     * identify the page when extending the detail page query
+     */
+    pageId?: string;
+    /**
+     * @description
+     * The query document to fetch the entity.
+     */
+    queryDocument: T;
+    /**
+     * @description
+     * The field of the query document that contains the entity.
+     */
+    entityField?: EntityField;
+    /**
+     * @description
+     * The parameters used to identify the entity.
+     */
+    params: {
+        id: string;
+    };
+    /**
+     * @description
+     * The entity type name for custom field configuration lookup.
+     * Required to filter out readonly custom fields before mutations.
+     * If not provided, the function will try to infer it from the query document.
+     */
+    entityName?: string;
+    /**
+     * @description
+     * The document to create the entity.
+     */
+    createDocument?: C;
+    /**
+     * @description
+     * The document to update the entity.
+     */
+    updateDocument?: U;
+    /**
+     * @description
+     * The function to set the values for the update document.
+     */
+    setValuesForUpdate: (
+        entity: NonNullable<ResultOf<T>[EntityField]>,
+    ) => WithLooseCustomFields<VariablesOf<U>[VarNameUpdate]>;
+    transformCreateInput?: (input: VariablesOf<C>[VarNameCreate]) => VariablesOf<C>[VarNameCreate];
+    transformUpdateInput?: (input: VariablesOf<U>[VarNameUpdate]) => VariablesOf<U>[VarNameUpdate];
+    /**
+     * @description
+     * The function to call when the update is successful.
+     */
+    onSuccess?: (entity: ResultOf<C>[keyof ResultOf<C>] | ResultOf<U>[keyof ResultOf<U>]) => void;
+    /**
+     * @description
+     * The function to call when the update is successful.
+     */
+    onError?: (error: unknown) => void;
+}
+
+export function getDetailQueryOptions<T, V extends { id: string }>(
+    document: TypedDocumentNode<T, V> | DocumentNode,
+    variables: V,
+    options: Partial<Parameters<typeof queryOptions>[0]> = {},
+): DefinedInitialDataOptions {
+    const queryName = getQueryName(document);
+    return queryOptions({
+        queryKey: ['DetailPage', queryName, variables],
+        queryFn: () => (variables.id === NEW_ENTITY_ID ? null : api.query(document, variables)),
+        ...options,
+    }) as DefinedInitialDataOptions;
+}
+
+/**
+ * @description
+ * Adds a "customFields" property to the translations if the entity has translations.
+ */
+export type DetailPageTranslations<
+    T extends TypedDocumentNode<any, any>,
+    EntityField extends keyof ResultOf<T>,
+> = 'translations' extends keyof NonNullable<ResultOf<T>[EntityField]>
+    ? Array<NonNullable<ResultOf<T>[EntityField]>['translations'][number] & { customFields?: any }>
+    : undefined;
+
+/**
+ * @description
+ * Adds a "customFields" property to the entity and a "translations" property to the entity.
+ */
+export type DetailPageEntity<
+    T extends TypedDocumentNode<any, any>,
+    EntityField extends keyof ResultOf<T>,
+> = ResultOf<T>[EntityField] & {
+    customFields?: any;
+    translations: DetailPageTranslations<T, EntityField>;
+};
+
+/**
+ * @description
+ *
+ * @docsCategory detail-views
+ * @docsPage useDetailPage
+ * @since 3.3.0
+ */
+export interface UseDetailPageResult<
+    T extends TypedDocumentNode<any, any>,
+    U extends TypedDocumentNode<any, any>,
+    EntityField extends keyof ResultOf<T>,
+> {
+    form: UseFormReturn<RemoveNullFields<VariablesOf<U>['input']>>;
+    submitHandler: (event: FormEvent<HTMLFormElement>) => void;
+    entity?: DetailPageEntity<T, EntityField>;
+    isPending: boolean;
+    refreshEntity: () => void;
+    resetForm: () => void;
+}
+
+/**
+ * @description
+ * **Status: Developer Preview**
+ *
+ * This hook is used to create an entity detail page which can read
+ * and update an entity.
+ *
+ * @example
+ * ```ts
+ * const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+ *     queryDocument: paymentMethodDetailDocument,
+ *     createDocument: createPaymentMethodDocument,
+ *     updateDocument: updatePaymentMethodDocument,
+ *     setValuesForUpdate: entity => {
+ *         return {
+ *             id: entity.id,
+ *             enabled: entity.enabled,
+ *             name: entity.name,
+ *             code: entity.code,
+ *             description: entity.description,
+ *             checker: entity.checker?.code
+ *                 ? {
+ *                       code: entity.checker?.code,
+ *                       arguments: entity.checker?.args,
+ *                   }
+ *                 : null,
+ *             handler: entity.handler?.code
+ *                 ? {
+ *                       code: entity.handler?.code,
+ *                       arguments: entity.handler?.args,
+ *                   }
+ *                 : null,
+ *             translations: entity.translations.map(translation => ({
+ *                 id: translation.id,
+ *                 languageCode: translation.languageCode,
+ *                 name: translation.name,
+ *                 description: translation.description,
+ *             })),
+ *             customFields: entity.customFields,
+ *         };
+ *     },
+ *     transformCreateInput: input => {
+ *         return {
+ *             ...input,
+ *             checker: input.checker?.code ? input.checker : undefined,
+ *             handler: input.handler,
+ *         };
+ *     },
+ *     params: { id: params.id },
+ *     onSuccess: async data => {
+ *         toast.success(i18n.t('Successfully updated payment method'));
+ *         resetForm();
+ *         if (creatingNewEntity) {
+ *             await navigate({ to: `../$id`, params: { id: data.id } });
+ *         }
+ *     },
+ *     onError: err => {
+ *         toast.error(i18n.t('Failed to update payment method'), {
+ *             description: err instanceof Error ? err.message : 'Unknown error',
+ *         });
+ *     },
+ * });
+ * ```
+ *
+ * @docsCategory detail-views
+ * @docsPage useDetailPage
+ * @docsWeight 0
+ * @since 3.3.0
+ */
+export function useDetailPage<
+    T extends TypedDocumentNode<any, any>,
+    C extends TypedDocumentNode<any, any>,
+    U extends TypedDocumentNode<any, any>,
+    EntityField extends keyof ResultOf<T> = keyof ResultOf<T>,
+    VarNameUpdate extends keyof VariablesOf<U> = 'input',
+    VarNameCreate extends keyof VariablesOf<C> = 'input',
+>(
+    options: DetailPageOptions<T, C, U, EntityField, VarNameCreate, VarNameUpdate>,
+): UseDetailPageResult<T, U, EntityField> {
+    const {
+        pageId,
+        queryDocument,
+        createDocument,
+        updateDocument,
+        setValuesForUpdate,
+        transformCreateInput,
+        transformUpdateInput,
+        params,
+        entityField,
+        entityName,
+        onSuccess,
+        onError,
+    } = options;
+    const isNew = params.id === NEW_ENTITY_PATH;
+    const queryClient = useQueryClient();
+    const returnEntityName = entityName ?? getEntityName(queryDocument);
+    const customFieldConfig = useCustomFieldConfig(returnEntityName);
+    const extendedDetailQuery = useExtendedDetailQuery(addCustomFields(queryDocument), pageId);
+    const detailQueryOptions = getDetailQueryOptions(extendedDetailQuery, {
+        id: isNew ? NEW_ENTITY_ID : params.id,
+    });
+    const detailQuery = useSuspenseQuery(detailQueryOptions);
+    const entityQueryField = entityField ?? getQueryName(extendedDetailQuery);
+
+    const entity = (detailQuery?.data as any)?.[entityQueryField] as
+        | DetailPageEntity<T, EntityField>
+        | undefined;
+
+    const resetForm = () => {
+        form.reset(form.getValues());
+    };
+
+    const createMutation = useMutation({
+        mutationFn: createDocument ? api.mutate(createDocument) : undefined,
+        onSuccess: data => {
+            if (createDocument) {
+                const createMutationName = getMutationName(createDocument);
+                onSuccess?.((data as any)[createMutationName]);
+            }
+        },
+        onError,
+    });
+
+    const updateMutation = useMutation({
+        mutationFn: updateDocument ? api.mutate(updateDocument) : undefined,
+        onSuccess: data => {
+            if (updateDocument) {
+                const updateMutationName = getMutationName(updateDocument);
+                onSuccess?.((data as any)[updateMutationName]);
+                void queryClient.invalidateQueries({ queryKey: detailQueryOptions.queryKey });
+            }
+        },
+        onError,
+    });
+
+    const document = isNew ? (createDocument ?? updateDocument) : updateDocument;
+    const { form, submitHandler } = useGeneratedForm({
+        document,
+        varName: 'input',
+        entity,
+        customFieldConfig,
+        setValues: setValuesForUpdate,
+        onSubmit(values: any) {
+            const filteredValues = removeReadonlyAndLocalizedCustomFields(values, customFieldConfig || []);
+
+            if (isNew) {
+                const finalInput = transformCreateInput?.(filteredValues) ?? filteredValues;
+                createMutation.mutate({ input: finalInput });
+            } else {
+                const finalInput = transformUpdateInput?.(filteredValues) ?? filteredValues;
+                updateMutation.mutate({ input: finalInput });
+            }
+        },
+    });
+
+    // A kind of ridiculous workaround to ensure that the `isDirty` and `isValid` properties
+    // are always up-to-date when used by the consuming component. This seems to be necessary
+    // due to the way that `react-hook-form` uses a Proxy object for the form state.
+    // See https://react-hook-form.com/docs/useform/formstate
+    // noinspection JSUnusedLocalSymbols
+    const { isDirty, isValid } = form.formState;
+
+    return {
+        form: form as any,
+        submitHandler,
+        entity,
+        isPending: updateMutation.isPending || detailQuery?.isPending,
+        refreshEntity: detailQuery.refetch,
+        resetForm,
+    };
+}

package/src/lib/framework/page/use-extended-router.tsx

@@ -0,0 +1,139 @@
+import { AnyRoute, createRoute, createRouter, RouterOptions } from '@tanstack/react-router';
+import { useMemo } from 'react';
+import { ErrorPage } from '../../components/shared/error-page.js';
+import { AUTHENTICATED_ROUTE_PREFIX } from '../../constants.js';
+import { useDashboardExtensions } from '../extension-api/use-dashboard-extensions.js';
+import { extensionRoutes } from './page-api.js';
+
+/**
+ * Creates a TanStack Router with the base route tree extended with additional
+ * routes from dashboard extensions.
+ */
+export const useExtendedRouter = (
+    baseRouteTree: AnyRoute,
+    routerOptions: Omit<RouterOptions<AnyRoute, any>, 'routeTree'>,
+) => {
+    const { extensionsLoaded } = useDashboardExtensions();
+
+    return useMemo(() => {
+        // Start with the base route tree
+        let routeTree = baseRouteTree;
+
+        // Only extend if extensions are loaded
+        if (!extensionsLoaded) {
+            return createExtendedRouter(routerOptions, routeTree);
+        }
+
+        const authenticatedRouteIndex = routeTree.children.findIndex(
+            (r: AnyRoute) => r.id === AUTHENTICATED_ROUTE_PREFIX,
+        );
+
+        if (authenticatedRouteIndex === -1) {
+            // No authenticated route found, return router with base tree
+            return createExtendedRouter(routerOptions, routeTree);
+        }
+
+        let authenticatedRoute: AnyRoute = routeTree.children[authenticatedRouteIndex];
+
+        const newAuthenticatedRoutes: AnyRoute[] = [];
+        const newRootRoutes: AnyRoute[] = [];
+
+        // Create new routes for each extension
+        for (const [path, config] of extensionRoutes.entries()) {
+            const pathWithoutLeadingSlash = path.startsWith('/') ? path.slice(1) : path;
+
+            // Check if route should be authenticated (default is true)
+            const isAuthenticated = config.authenticated !== false;
+
+            if (isAuthenticated) {
+                // Check if the route already exists under authenticated route
+                if (
+                    authenticatedRoute.children.findIndex(
+                        (r: AnyRoute) => r.path === pathWithoutLeadingSlash,
+                    ) > -1
+                ) {
+                    // Skip if the route already exists
+                    continue;
+                }
+
+                const newRoute: AnyRoute = createRoute({
+                    path: `/${pathWithoutLeadingSlash}`,
+                    getParentRoute: () => authenticatedRoute,
+                    loader: config.loader,
+                    validateSearch: config.validateSearch,
+                    component: () => config.component(newRoute),
+                    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+                });
+                newAuthenticatedRoutes.push(newRoute);
+            } else {
+                // Check if the route already exists at the root level
+                // Check both by path and by id (which includes the leading slash)
+                const routeExists =
+                    routeTree.children.some(
+                        (r: AnyRoute) =>
+                            r.path === `/${pathWithoutLeadingSlash}` ||
+                            r.path === pathWithoutLeadingSlash ||
+                            r.id === `/${pathWithoutLeadingSlash}`,
+                    ) ||
+                    newRootRoutes.some(
+                        (r: AnyRoute) =>
+                            r.path === `/${pathWithoutLeadingSlash}` ||
+                            r.id === `/${pathWithoutLeadingSlash}`,
+                    );
+
+                if (routeExists) {
+                    // Skip if the route already exists
+                    continue;
+                }
+
+                const newRoute: AnyRoute = createRoute({
+                    path: `/${pathWithoutLeadingSlash}`,
+                    getParentRoute: () => routeTree,
+                    loader: config.loader,
+                    validateSearch: config.validateSearch,
+                    component: () => config.component(newRoute),
+                    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+                });
+                newRootRoutes.push(newRoute);
+            }
+        }
+
+        // Only extend the tree if we have new routes to add
+        if (newAuthenticatedRoutes.length === 0 && newRootRoutes.length === 0) {
+            return createExtendedRouter(routerOptions, routeTree);
+        }
+
+        const childrenWithoutAuthenticated = routeTree.children.filter(
+            (r: AnyRoute) => r.id !== AUTHENTICATED_ROUTE_PREFIX,
+        );
+
+        const updatedAuthenticatedRoute = authenticatedRoute.addChildren([
+            ...authenticatedRoute.children,
+            ...newAuthenticatedRoutes,
+        ]);
+
+        const extendedRouteTree: AnyRoute = routeTree.addChildren([
+            ...childrenWithoutAuthenticated,
+            updatedAuthenticatedRoute,
+            ...newRootRoutes,
+        ]);
+
+        return createExtendedRouter(routerOptions, extendedRouteTree);
+    }, [baseRouteTree, routerOptions, extensionsLoaded]);
+};
+
+/**
+ * Helper to create a router with extended route tree, handling some
+ * type issues with hydrate/dehydrate functions.
+ */
+function createExtendedRouter(
+    routerOptions: Omit<RouterOptions<AnyRoute, any>, 'routeTree'>,
+    extendedRouteTree: AnyRoute,
+) {
+    return createRouter({
+        ...routerOptions,
+        dehydrate: routerOptions.dehydrate as any,
+        hydrate: routerOptions.hydrate as any,
+        routeTree: extendedRouteTree,
+    });
+}

package/src/lib/framework/registry/global-registry.ts

@@ -0,0 +1,50 @@
+import { GlobalRegistryContents } from './registry-types.js';
+
+/**
+ * There are certain global objects that are used in the configuration and extension
+ * of the dashboard. Due to the way that Vite bundles and executes the code,
+ * we cannot rely on closures over variables in the root scope, as the same variable
+ * in different bundles will be different instances.
+ *
+ * This class is used to register and retrieve these global objects.
+ */
+class GlobalRegistry {
+    private static instance: GlobalRegistry;
+    private registry: Map<string, any> = new Map();
+
+    constructor() {
+        if (!GlobalRegistry.instance) {
+            GlobalRegistry.instance = this;
+        }
+        return GlobalRegistry.instance;
+    }
+
+    public register<T extends GlobalRegistryKey>(key: T, value: GlobalRegistryContents[T]) {
+        if (!this.registry.has(key)) {
+            this.registry.set(key, value);
+        }
+    }
+
+    public get<T extends GlobalRegistryKey>(key: T): GlobalRegistryContents[T] {
+        return this.registry.get(key);
+    }
+
+    public set<T extends GlobalRegistryKey>(
+        key: T,
+        updater: (oldValue: GlobalRegistryContents[T]) => GlobalRegistryContents[T],
+    ) {
+        const oldValue = this.get(key);
+        this.registry.set(key, updater(oldValue));
+    }
+
+    public has(key: string): boolean {
+        return this.registry.has(key);
+    }
+}
+
+export type GlobalRegistryKey = keyof GlobalRegistryContents;
+
+const _globalRegistry: GlobalRegistry = (globalThis as any).globalRegistry ?? new GlobalRegistry();
+(globalThis as any).globalRegistry = _globalRegistry;
+
+export const globalRegistry = _globalRegistry;

package/src/lib/framework/registry/registry-types.ts

@@ -0,0 +1,32 @@
+import {
+    BulkAction,
+    DashboardActionBarItem,
+    DashboardHistoryEntryComponent,
+    DashboardLoginExtensions,
+    DashboardPageBlockDefinition,
+    DashboardWidgetDefinition,
+} from '@/vdb/framework/extension-api/types/index.js';
+import { DashboardFormComponent } from '@/vdb/framework/form-engine/form-engine-types.js';
+import { DocumentNode } from 'graphql';
+
+import { DataDisplayComponent } from '../component-registry/component-registry.js';
+import { DashboardAlertDefinition } from '../extension-api/types/alerts.js';
+import { DataTableDisplayComponent } from '../extension-api/types/data-table.js';
+import { NavMenuConfig } from '../nav-menu/nav-menu-extensions.js';
+
+export interface GlobalRegistryContents {
+    extensionSourceChangeCallbacks: Set<() => void>;
+    registerDashboardExtensionCallbacks: Set<() => void>;
+    navMenuConfig: NavMenuConfig;
+    dashboardActionBarItemRegistry: Map<string, DashboardActionBarItem[]>;
+    dashboardPageBlockRegistry: Map<string, DashboardPageBlockDefinition[]>;
+    dashboardWidgetRegistry: Map<string, DashboardWidgetDefinition>;
+    dashboardAlertRegistry: Map<string, DashboardAlertDefinition>;
+    inputComponents: Map<string, DashboardFormComponent>;
+    displayComponents: Map<string, DataDisplayComponent | DataTableDisplayComponent>;
+    bulkActionsRegistry: Map<string, BulkAction[]>;
+    listQueryDocumentRegistry: Map<string, DocumentNode[]>;
+    detailQueryDocumentRegistry: Map<string, DocumentNode[]>;
+    loginExtensions: DashboardLoginExtensions;
+    historyEntries: Map<string, DashboardHistoryEntryComponent['component']>;
+}

package/src/lib/graphql/api.ts

@@ -0,0 +1,123 @@
+import {
+    LS_KEY_SELECTED_CHANNEL_TOKEN,
+    LS_KEY_SESSION_TOKEN,
+    LS_KEY_USER_SETTINGS,
+} from '@/vdb/constants.js';
+import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { AwesomeGraphQLClient } from 'awesome-graphql-client';
+import { DocumentNode, print } from 'graphql';
+import { uiConfig } from 'virtual:vendure-ui-config';
+
+import { getApiBaseUrl } from '../utils/config-utils.js';
+
+const API_URL = getApiBaseUrl() + `/${uiConfig.api.adminApiPath}`;
+
+export type Variables = object;
+export type RequestDocument = string | DocumentNode;
+
+const awesomeClient = new AwesomeGraphQLClient({
+    endpoint: API_URL,
+    fetch: async (url: string, options: RequestInit = {}) => {
+        // Get the active channel token from localStorage
+        const channelToken = localStorage.getItem(LS_KEY_SELECTED_CHANNEL_TOKEN);
+        const sessionToken = localStorage.getItem(LS_KEY_SESSION_TOKEN);
+        const headers = new Headers(options.headers);
+
+        if (sessionToken) {
+            headers.set('Authorization', `Bearer ${sessionToken}`);
+        }
+        if (channelToken) {
+            headers.set(uiConfig.api.channelTokenKey, channelToken);
+        }
+
+        // Get the content language from user settings and add as query parameter
+        let finalUrl = url;
+        try {
+            const userSettings = localStorage.getItem(LS_KEY_USER_SETTINGS);
+            if (userSettings) {
+                const settings = JSON.parse(userSettings);
+                const contentLanguage = settings.contentLanguage;
+
+                if (contentLanguage) {
+                    const urlObj = new URL(finalUrl);
+                    urlObj.searchParams.set('languageCode', contentLanguage);
+                    finalUrl = urlObj.toString();
+                }
+            }
+        } catch (error) {
+            // eslint-disable-next-line no-console
+            console.warn('Failed to read content language from user settings:', error);
+        }
+
+        return fetch(finalUrl, {
+            ...options,
+            headers,
+            credentials: 'include',
+            mode: 'cors',
+        }).then(res => {
+            const authToken = res.headers.get(uiConfig.api.authTokenHeaderKey);
+            if (authToken) {
+                localStorage.setItem(LS_KEY_SESSION_TOKEN, authToken);
+            }
+            return res;
+        });
+    },
+});
+
+/**
+ * @description
+ * Handles the scenario where there's an invalid channel token in local storage.
+ * Most often seen in local development when testing multiple backends on the same
+ * localhost origin.
+ */
+function handleInvalidChannelToken(err: unknown) {
+    if (err instanceof Error) {
+        if ((err as any).extensions?.code === 'CHANNEL_NOT_FOUND') {
+            localStorage.removeItem(LS_KEY_SELECTED_CHANNEL_TOKEN);
+        }
+    }
+}
+
+export type VariablesAndRequestHeadersArgs<V extends Variables> =
+    V extends Record<any, never>
+        ? [variables?: V, requestHeaders?: HeadersInit]
+        : [variables: V, requestHeaders?: HeadersInit];
+
+function query<T, V extends Variables = Variables>(
+    document: RequestDocument | TypedDocumentNode<T, V>,
+    variables?: V,
+): Promise<T> {
+    const documentString = typeof document === 'string' ? document : print(document);
+    return awesomeClient.request(documentString, variables).catch(err => {
+        handleInvalidChannelToken(err);
+        throw err;
+    }) as any;
+}
+
+function mutate<T, V extends Variables = Variables>(
+    document: TypedDocumentNode<T, V>,
+): (variables: V) => Promise<T>;
+function mutate(document: RequestDocument): (variables: Variables) => Promise<unknown>;
+function mutate<T, V extends Variables = Variables>(
+    document: TypedDocumentNode<T, V>,
+    variables: V,
+): Promise<T>;
+function mutate(document: RequestDocument, variables: Variables): Promise<unknown>;
+function mutate<T, V extends Variables = Variables>(
+    document: RequestDocument | TypedDocumentNode<T, V>,
+    maybeVariables?: V,
+): Promise<T> | ((variables: V) => Promise<T>) {
+    const documentString = typeof document === 'string' ? document : print(document);
+    if (maybeVariables) {
+        return awesomeClient.request(documentString, maybeVariables) as any;
+    } else {
+        return (variables: V): Promise<T> => {
+            return awesomeClient.request(documentString, variables) as any;
+        };
+    }
+}
+
+export const api = {
+    query,
+    mutate,
+};