@adobe-commerce/fetch-graphql 1.0.0-alpha1

package/.eslintrc.js

@@ -0,0 +1,5 @@
+const baseConfig = require('@adobe/elsie/config/eslint');
+
+module.exports = {
+  ...baseConfig,
+};

package/package.json

@@ -0,0 +1,20 @@
+{
+    "name": "@adobe-commerce/fetch-graphql",
+    "version": "1.0.0-alpha1",
+    "license": "SEE LICENSE IN LICENSE.md",
+    "description": "A library to fetch GraphQL queries and mutations",
+    "engines": {
+        "node": ">=16"
+    },
+    "main": "src/index.ts",
+    "scripts": {
+        "lint": "eslint",
+        "test": "jest",
+        "test:ci": "jest --config jest.config.js --passWithNoTests --coverage",
+        "build": " "
+    },
+    "devDependencies": {},
+    "dependencies": {
+        "@adobe/fetch-graphql": "file:../../packages/fetch-graphql"
+    }
+}

package/src/index.ts

@@ -0,0 +1,193 @@
+export type Header = { [key: string]: string | null };
+
+export type FetchOptions = {
+  method?: 'GET' | 'POST';
+  variables?: { [key: string]: any };
+  signal?: AbortSignal;
+  cache?:
+    | 'default'
+    | 'no-store'
+    | 'reload'
+    | 'no-cache'
+    | 'force-cache'
+    | 'only-if-cached';
+};
+
+export type FetchQueryError = Array<{
+  message: string;
+  extensions: { category: string };
+}>;
+
+const defaultHeaders = {
+  'Content-Type': 'application/json',
+  Accept: 'application/json',
+};
+
+class FetchGraphQLMesh {
+  public _endpoint?: string;
+
+  get endpoint() {
+    return this._endpoint;
+  }
+
+  get fetchGraphQlHeaders() {
+    return this._fetchGraphQlHeaders;
+  }
+
+  public _fetchGraphQlHeaders: Header | undefined;
+
+  /**
+   * Sets the GraphQL endpoint.
+   * @param endpoint - The GraphQL endpoint.
+   */
+  public setEndpoint(endpoint: string) {
+    this._endpoint = endpoint;
+  }
+
+  /**
+   * Sets the GraphQL headers.
+   * @param key - The key of the header.
+   * @param value - The value of the header.
+   */
+  public setFetchGraphQlHeader(key: string, value: string | null) {
+    this._fetchGraphQlHeaders = {
+      ...this.fetchGraphQlHeaders,
+      [key]: value,
+    };
+  }
+  /**
+   * Removes a specific GraphQL header.
+   * @param key - The key of the header.
+   */
+  public removeFetchGraphQlHeader(key: string) {
+    delete this._fetchGraphQlHeaders?.[key];
+  }
+  /**
+   * Sets the GraphQL headers.
+   * @param header - The header object.
+   */
+  public setFetchGraphQlHeaders(header: Header) {
+    this._fetchGraphQlHeaders = { ...header };
+  }
+  /**
+   * Fetches GraphQL data.
+   * @param query - The GraphQL query.
+   * @param options - Optional configuration for the fetch request.
+   * @returns
+   */
+  public async fetchGraphQl<T = any>(
+    query: string,
+    options?: FetchOptions
+  ): Promise<{ errors?: FetchQueryError; data: T }> {
+    const endpoint = this.endpoint;
+    const fetchGraphQlHeaders = this.fetchGraphQlHeaders;
+
+    if (!endpoint) throw Error('Missing "url"');
+
+    const method = options?.method ?? 'POST';
+    const cache = options?.cache;
+    const signal = options?.signal;
+
+    let body;
+    const url = new URL(endpoint);
+    const headers = {
+      ...defaultHeaders,
+      ...fetchGraphQlHeaders,
+    };
+
+    if (method === 'POST') {
+      body = JSON.stringify({
+        query,
+        variables: options?.variables,
+      });
+    }
+
+    if (method === 'GET') {
+      url.searchParams.append('query', minimizeGraphQlQuery(query));
+
+      if (options?.variables)
+        url.searchParams.append('variables', JSON.stringify(options.variables));
+    }
+
+    return await fetch(url, {
+      method,
+      headers,
+      body,
+      cache,
+      signal,
+    }).then((r) => r.json());
+  }
+  /**
+   * Gets the configuration.
+   */
+  public getConfig() {
+    return {
+      endpoint: this.endpoint,
+      fetchGraphQlHeaders: this.fetchGraphQlHeaders,
+    };
+  }
+
+  public getMethods() {
+    return {
+      setEndpoint: this.setEndpoint.bind(this),
+      setFetchGraphQlHeader: this.setFetchGraphQlHeader.bind(this),
+      removeFetchGraphQlHeader: this.removeFetchGraphQlHeader.bind(this),
+      setFetchGraphQlHeaders: this.setFetchGraphQlHeaders.bind(this),
+      fetchGraphQl: this.fetchGraphQl.bind(this),
+      getConfig: this.getConfig.bind(this),
+    };
+  }
+}
+
+const mesh = new FetchGraphQLMesh();
+
+/**
+ * `FetchGraphQL` is a class that extends `FetchGraphQLMesh`.
+ * It provides methods to get the GraphQL endpoint and headers.
+ *
+ * @class
+ *
+ */
+export class FetchGraphQL extends FetchGraphQLMesh {
+  get endpoint() {
+    return this._endpoint ?? mesh.endpoint;
+  }
+
+  get fetchGraphQlHeaders() {
+    return (
+      (this._endpoint
+        ? this._fetchGraphQlHeaders
+        : { ...this._fetchGraphQlHeaders, ...mesh.fetchGraphQlHeaders }) || {}
+    );
+  }
+}
+
+function minimizeGraphQlQuery(query: string) {
+  // Remove comments
+  query = query.replace(/#.*/g, '');
+
+  // Remove extra spaces, tabs, and line breaks
+  query = query.replace(/\s+/g, ' ');
+
+  return query.trim();
+}
+/**
+ * Exports several methods from the `mesh` object.
+ *
+ * @property {Function} setEndpoint - Sets the GraphQL endpoint.
+ * @property {Function} setFetchGraphQlHeaders - Sets the GraphQL headers.
+ * @property {Function} setFetchGraphQlHeader - Sets a specific GraphQL header.
+ * @property {Function} removeFetchGraphQlHeader - Removes a specific GraphQL header.
+ * @property {Function} fetchGraphQl - Fetches GraphQL data.
+ * @property {Function} getConfig - Gets the configuration.
+ */
+
+// Global Mesh instance
+export const {
+  setEndpoint,
+  setFetchGraphQlHeaders,
+  setFetchGraphQlHeader,
+  removeFetchGraphQlHeader,
+  fetchGraphQl,
+  getConfig,
+} = mesh.getMethods();