@hyper-fetch/graphql 1.0.0

package/src/adapter/adapter.browser.ts

@@ -0,0 +1,90 @@
+import { getAdapterBindings, getResponseHeaders, parseResponse, parseErrorResponse } from "@hyper-fetch/core";
+
+import { gqlExtra, GraphQLAdapterType, defaultTimeout, getRequestValues } from "adapter";
+
+export const adapter: GraphQLAdapterType = async (request, requestId) => {
+  const {
+    makeRequest,
+    config,
+    headers,
+    onError,
+    onResponseEnd,
+    onTimeoutError,
+    onRequestEnd,
+    createAbortListener,
+    onResponseProgress,
+    onRequestProgress,
+    onResponseStart,
+    onBeforeRequest,
+    onRequestStart,
+    onSuccess,
+  } = await getAdapterBindings<GraphQLAdapterType>(request, requestId, 0, gqlExtra);
+
+  const { fullUrl, payload, method } = getRequestValues(request);
+
+  return makeRequest((resolve) => {
+    const xhr = new XMLHttpRequest();
+    xhr.timeout = defaultTimeout;
+
+    const abort = () => xhr.abort();
+
+    // Inject xhr options
+    Object.entries(config).forEach(([name, value]) => {
+      xhr[name] = value;
+    });
+
+    // Open connection
+    xhr.open(method, fullUrl, true);
+
+    // Set Headers
+    Object.entries(headers).forEach(([name, value]) => xhr.setRequestHeader(name, value as string));
+
+    // Listen to abort signal
+    const unmountListener = createAbortListener(0, gqlExtra, abort, resolve);
+
+    // Request handlers
+    xhr.upload.onprogress = onRequestProgress;
+
+    // Response handlers
+    xhr.onloadstart = (): void => {
+      onRequestEnd();
+      onResponseStart();
+    };
+
+    xhr.onprogress = onResponseProgress;
+
+    xhr.onloadend = () => {
+      onResponseEnd();
+      unmountListener();
+    };
+
+    xhr.ontimeout = () => onTimeoutError(0, gqlExtra, resolve);
+
+    // Data handler
+    xhr.onreadystatechange = (e: Event) => {
+      const event = e as unknown as ProgressEvent<XMLHttpRequest>;
+      const finishedState = 4;
+
+      if (event.target && event.target.readyState === finishedState) {
+        const { status } = event.target;
+        const success = String(status).startsWith("2") || String(status).startsWith("3");
+        const responseHeaders = getResponseHeaders(xhr.getAllResponseHeaders());
+
+        if (success) {
+          const data = parseResponse(event.target.response);
+          onSuccess(data, status, { headers: responseHeaders }, resolve);
+        } else {
+          // delay to finish after onabort/ontimeout
+          const data = parseErrorResponse(event.target.response);
+          onError(data, status, { headers: responseHeaders }, resolve);
+        }
+      }
+    };
+
+    // Start request
+    onBeforeRequest();
+    onRequestStart();
+
+    xhr.send(payload);
+  });
+};

package/src/adapter/adapter.constants.ts

@@ -0,0 +1,9 @@
+import { DateInterval } from "@hyper-fetch/core";
+
+import { GraphQlExtraType } from "./adapter.types";
+
+export const defaultTimeout = DateInterval.second * 5;
+
+export const gqlExtra: GraphQlExtraType = {
+  headers: {},
+};

package/src/adapter/adapter.server.ts

@@ -0,0 +1,91 @@
+import { getAdapterBindings, parseErrorResponse, parseResponse } from "@hyper-fetch/core";
+import http, { OutgoingHttpHeaders } from "http";
+import https from "https";
+
+import { gqlExtra, defaultTimeout, GraphQLAdapterType, getRequestValues } from "adapter";
+
+export const adapter: GraphQLAdapterType = async (request, requestId) => {
+  const {
+    makeRequest,
+    config,
+    headers,
+    onError,
+    onResponseEnd,
+    onTimeoutError,
+    onRequestEnd,
+    createAbortListener,
+    onResponseProgress,
+    onResponseStart,
+    onBeforeRequest,
+    onRequestStart,
+    onSuccess,
+  } = await getAdapterBindings<GraphQLAdapterType>(request, requestId, 0, gqlExtra);
+
+  const { fullUrl, payload, method } = getRequestValues(request);
+
+  const httpClient = request.client.url.includes("https://") ? https : http;
+  const options = {
+    path: fullUrl,
+    method,
+    headers: headers as OutgoingHttpHeaders,
+    timeout: defaultTimeout,
+  };
+
+  Object.entries(config).forEach(([name, value]) => {
+    options[name] = value;
+  });
+
+  let unmountListener = () => null;
+  onBeforeRequest();
+
+  if (payload) {
+    options.headers["Content-Length"] = Buffer.byteLength(JSON.stringify(payload));
+  }
+
+  return makeRequest((resolve) => {
+    const httpRequest = httpClient.request(options, (response) => {
+      response.setEncoding("utf8");
+      unmountListener = createAbortListener(0, gqlExtra, response.destroy, resolve);
+
+      let chunks = "";
+      const totalDownloadBytes = Number(response.headers["content-length"]);
+      let downloadedBytes = 0;
+
+      onRequestStart();
+
+      response.on("data", (chunk) => {
+        if (!chunks) {
+          onRequestEnd();
+          onResponseStart();
+        }
+        downloadedBytes += chunk.length;
+        chunks += chunk;
+        onResponseProgress({ total: totalDownloadBytes, loaded: downloadedBytes });
+      });
+
+      response.on("end", () => {
+        const { statusCode } = response;
+        const success = String(statusCode).startsWith("2") || String(statusCode).startsWith("3");
+
+        if (success) {
+          const data = parseResponse(chunks);
+          onSuccess(data, statusCode, { headers: response.headers as Record<string, string> }, resolve);
+        } else {
+          // delay to finish after onabort/ontimeout
+          const data = parseErrorResponse(chunks);
+          onError(data, statusCode, { headers: response.headers as Record<string, string> }, resolve);
+        }
+
+        unmountListener();
+        onResponseEnd();
+      });
+    });
+
+    httpRequest.on("timeout", () => onTimeoutError(0, gqlExtra, resolve));
+    httpRequest.on("error", (error) => onError(error, 0, gqlExtra, resolve));
+    if (payload) {
+      httpRequest.write(payload);
+    }
+    httpRequest.end();
+  });
+};

package/src/adapter/adapter.ts

@@ -0,0 +1,27 @@
+import * as browser from "@browser-adapter";
+import * as server from "@server-adapter";
+import { HttpMethodsEnum, ClientInstance } from "@hyper-fetch/core";
+import { print } from "graphql/language/printer";
+
+import { GraphQLAdapterType, GraphQlEndpointType } from "adapter";
+
+export const graphqlAdapter = (client: ClientInstance) => {
+  const adapter: GraphQLAdapterType = async (request, requestId) => {
+    if (typeof XMLHttpRequest !== "undefined") {
+      return browser.adapter(request, requestId);
+    }
+    return server.adapter(request, requestId);
+  };
+
+  const mapper = <E extends GraphQlEndpointType>(endpoint: E): string => {
+    if (typeof endpoint === "string") {
+      return endpoint;
+    }
+    return print(endpoint);
+  };
+
+  return client
+    .setDefaultMethod(HttpMethodsEnum.post)
+    .setEndpointMapper(mapper)
+    .setAdapter(() => adapter);
+};

package/src/adapter/adapter.types.ts

@@ -0,0 +1,54 @@
+import { AdapterType, NegativeTypes, QueryParamsType } from "@hyper-fetch/core";
+import { DocumentNode } from "graphql/language/ast";
+
+export enum GraphQlMethod {
+  POST = "POST",
+  GET = "GET",
+}
+
+export type GraphQlExtraType = { headers: HeadersInit };
+
+export type GraphQlEndpointType = string | DocumentNode;
+
+export type GraphQLAdapterType = AdapterType<
+  Partial<XMLHttpRequest>,
+  GraphQlMethod,
+  number,
+  GraphQlExtraType,
+  QueryParamsType | string,
+  GraphQlEndpointType
+>;
+
+// Extract
+
+type GqlParamType = boolean | string | number | Record<string, any> | NegativeTypes;
+
+export type ExtractGqlRouteParams<T extends string> = string extends T
+  ? NegativeTypes
+  : T extends `${string}query ${infer Parameters} {${infer QueryRest}`
+  ? Parameters extends `${string}$${infer Param},${infer Rest}`
+    ? GqlParameter<Param, Rest> &
+        // eslint-disable-next-line @typescript-eslint/ban-types
+        (ExtractGqlRouteParams<QueryRest> extends NegativeTypes ? {} : ExtractGqlRouteParams<QueryRest>)
+    : Parameters extends `${string}$${infer Param})${infer Rest}`
+    ? GqlParameter<Param, Rest> &
+        // eslint-disable-next-line @typescript-eslint/ban-types
+        (ExtractGqlRouteParams<QueryRest> extends NegativeTypes ? {} : ExtractGqlRouteParams<QueryRest>)
+    : NegativeTypes
+  : T extends `${string}$${infer Parameters},${infer Rest}`
+  ? GqlParameter<Parameters, Rest>
+  : T extends `${string}$${infer Parameters})${infer Rest}`
+  ? GqlParameter<Parameters, Rest>
+  : NegativeTypes;
+
+export type GqlParameter<T extends string, Rest extends string> = T extends `${infer Param}:${string}!`
+  ? { [k in Param]: GqlParamType } & (ExtractGqlRouteParams<Rest> extends NegativeTypes
+      ? // eslint-disable-next-line @typescript-eslint/ban-types
+        {}
+      : ExtractGqlRouteParams<Rest>)
+  : T extends `${infer Param}:${string}`
+  ? { [k in Param]?: GqlParamType } & (ExtractGqlRouteParams<Rest> extends NegativeTypes
+      ? // eslint-disable-next-line @typescript-eslint/ban-types
+        {}
+      : ExtractGqlRouteParams<Rest>)
+  : NegativeTypes;

package/src/adapter/adapter.utils.ts

@@ -0,0 +1,23 @@
+import { RequestInstance, HttpMethodsEnum } from "@hyper-fetch/core";
+
+export const getRequestValues = (request: RequestInstance) => {
+  const { method } = request;
+
+  const isPostRequest = request.method === HttpMethodsEnum.post;
+
+  const query = request.endpoint;
+  const variables = request.data;
+
+  const fullUrl = isPostRequest
+    ? request.client.url
+    : request.client.url + request.client.stringifyQueryParams({ query, variables });
+
+  const payload = isPostRequest
+    ? JSON.stringify({
+        query,
+        variables,
+      })
+    : null;
+
+  return { fullUrl, payload, method };
+};

package/src/adapter/index.ts

@@ -0,0 +1,4 @@
+export * from "./adapter";
+export * from "./adapter.types";
+export * from "./adapter.utils";
+export * from "./adapter.constants";

package/src/index.ts

@@ -0,0 +1,3 @@
+// rollup client entry point
+
+export * from "./adapter";

package/tsconfig.base.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "baseUrl": "./src",
+    "paths": {
+      "@browser-adapter": ["./adapter/adapter.browser.ts"],
+      "@server-adapter": ["./adapter/adapter.browser.ts"]
+    }
+  },
+  "include": ["./src/index.ts", "__tests__/*"],
+  "exclude": ["dist", "jest.config.ts"]
+}

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "baseUrl": "./src",
+    "paths": {
+      "@browser-adapter": ["./adapter/adapter.browser.ts"],
+      "@server-adapter": ["./adapter/adapter.server.ts"]
+    }
+  },
+  "exclude": ["dist", "jest.config.ts"]
+}