feat: added strict client fetcher

Author: demeyerthom

src/client.ts

@@ -1,5 +1,5 @@
 import type { DocumentTypeDecoration } from "@graphql-typed-document-node/core";
-import { print } from "graphql";
+import {GraphQLError, print} from "graphql";
 import { isNode } from "graphql/language/ast.js";
 import {
 	createRequest,
@@ -16,6 +16,7 @@ import {
 	mergeHeaders,
 	type GqlResponse,
 } from "./helpers";
+import {toe} from "graphql-toe";
 
 type Options = {
 	/**
@@ -60,6 +61,36 @@ type RequestOptions = {
 	headers?: Headers | Record<string, string>;
 };
 
+export type StrictClientFetcher = <TResponse extends Record<string, any>, TVariables>(
+	astNode: DocumentTypeDecoration<TResponse, TVariables>,
+	variables?: TVariables,
+	options?: RequestOptions,
+) => Promise<TResponse>;
+
+// Wraps the initServerFetcher function, which returns the result wrapped in the graphql-toe library. This will throw
+// an error if a field is used that had an entry in the error response array
+export const initStrictClientFetcher = (url: string, options: Options = {}): StrictClientFetcher => {
+	const fetcher = initClientFetcher(url, options);
+	return async <TResponse extends Record<string, any>, TVariables>(
+		astNode: DocumentTypeDecoration<TResponse, TVariables>,
+		variables?: TVariables,
+		options?: RequestOptions,
+	): Promise<TResponse> => {
+		const response = await fetcher(
+			astNode,
+			variables,
+			options,
+		);
+
+		return toe<TResponse>(
+			response as unknown as {
+				data?: TResponse | null | undefined;
+				errors?: readonly GraphQLError[] | undefined;
+			},
+		);
+	};
+};
+
 export type ClientFetcher = <TResponse, TVariables>(
 	astNode: DocumentTypeDecoration<TResponse, TVariables>,
 	variables?: TVariables,

src/index.ts

@@ -1,4 +1,5 @@
-export { initClientFetcher } from "./client";
-export type { ClientFetcher } from "./client";
-export { ClientGqlFetcherProvider, useClientGqlFetcher } from "./provider";
-export type { GraphQLError, GqlResponse } from "./helpers";
+export {initClientFetcher, initStrictClientFetcher} from "./client";
+export type {ClientFetcher, StrictClientFetcher} from "./client";
+export {ClientGqlFetcherProvider, useClientGqlFetcher} from "./provider";
+export {StrictClientGqlFetcherProvider, useStrictClientGqlFetcher} from "./strict-provider";
+export type {GraphQLError, GqlResponse} from "./helpers";

src/request.ts

@@ -1,10 +1,4 @@
-import type { DocumentTypeDecoration } from "@graphql-typed-document-node/core";
 import { createSha256, extractOperationName, pruneObject } from "helpers";
-
-export type DocumentIdFn = <TResult, TVariables>(
-	query: DocumentTypeDecoration<TResult, TVariables>,
-) => string | undefined;
-
 export type GraphQLRequest<TVariables> = {
 	operationName: string;
 	query: string | undefined;

src/strict-provider.tsx

@@ -0,0 +1,47 @@
+import type {ClientFetcher, StrictClientFetcher} from "client";
+import { createContext, useContext } from "react";
+import invariant from "tiny-invariant";
+import type { PropsWithChildren } from "react";
+
+/**
+ * Context to provide the fetcher for the API used during client side calls
+ */
+export const StrictClientGqlFetcherContext = createContext<StrictClientFetcher | undefined>(
+	undefined,
+);
+
+export type StrictClientGqlFetcherProviderProps = PropsWithChildren<{
+	fetcher: StrictClientFetcher;
+}>;
+
+/**
+ * Provides the fetcher that should be used for client side calls to the React context
+ */
+export const StrictClientGqlFetcherProvider = ({
+	children,
+	fetcher,
+}: StrictClientGqlFetcherProviderProps) => (
+	<StrictClientGqlFetcherContext.Provider value={fetcher}>
+		{children}
+	</StrictClientGqlFetcherContext.Provider>
+);
+
+/**
+ * React hook to get the fetcher that should be used for client side calls
+ */
+export const useStrictClientGqlFetcher = (): StrictClientFetcher => {
+	const context = useContext(StrictClientGqlFetcherContext);
+
+	if (context === undefined) {
+		if ("production" !== process.env.NODE_ENV) {
+			invariant(
+				false,
+				"useStrictClientGqlFetcher must be used within a ClientGqlFetcherProvider",
+			);
+		} else {
+			invariant(false);
+		}
+	}
+
+	return context as StrictClientFetcher;
+};