Allow using FetchApi in graphiql api setup

Signed-off-by: Gustaf Räntilä <g.rantila@gmail.com>

.changeset/chilled-beds-exist.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-graphiql': patch
+---
+
+Add support for using the FetchApi

plugins/graphiql/api-report.md

@@ -8,6 +8,7 @@
 import { ApiRef } from '@backstage/core-plugin-api';
 import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { ErrorApi } from '@backstage/core-plugin-api';
+import { FetchApi } from '@backstage/core-plugin-api';
 import { IconComponent } from '@backstage/core-plugin-api';
 import { JSX as JSX_2 } from 'react';
 import { OAuthApi } from '@backstage/core-plugin-api';
@@ -23,6 +24,7 @@ export type EndpointConfig = {
   headers?: {
     [name in string]: string;
   };
+  fetchApi?: FetchApi;
 };
 
 // @public (undocumented)
@@ -31,6 +33,7 @@ export type GithubEndpointConfig = {
   title: string;
   url?: string;
   errorApi?: ErrorApi;
+  fetchApi?: FetchApi;
   githubAuthApi: OAuthApi;
 };
 

plugins/graphiql/src/lib/api/GraphQLEndpoints.ts

@@ -15,7 +15,7 @@
  */
 
 import { GraphQLBrowseApi, GraphQLEndpoint } from './types';
-import { ErrorApi, OAuthApi } from '@backstage/core-plugin-api';
+import { ErrorApi, FetchApi, OAuthApi } from '@backstage/core-plugin-api';
 
 /**
  * Helper for generic http endpoints
@@ -31,6 +31,10 @@ export type EndpointConfig = {
   method?: 'POST';
   // Defaults to setting Content-Type to application/json
   headers?: { [name in string]: string };
+  /**
+   * Fetch API to use instead of browser fetch()
+   */
+  fetchApi?: FetchApi;
 };
 
 /** @public */
@@ -45,6 +49,10 @@ export type GithubEndpointConfig = {
    * Errors will be posted to the ErrorApi if it is provided.
    */
   errorApi?: ErrorApi;
+  /**
+   * Fetch API to use instead of browser fetch()
+   */
+  fetchApi?: FetchApi;
   /**
    * GitHub Auth API used to authenticate requests.
    */
@@ -55,7 +63,7 @@ export type GithubEndpointConfig = {
 export class GraphQLEndpoints implements GraphQLBrowseApi {
   // Create a support
   static create(config: EndpointConfig): GraphQLEndpoint {
-    const { id, title, url, method = 'POST' } = config;
+    const { id, title, url, method = 'POST', fetchApi } = config;
     return {
       id,
       title,
@@ -66,7 +74,7 @@ export class GraphQLEndpoints implements GraphQLBrowseApi {
           ...config.headers,
           ...options.headers,
         };
-        const res = await fetch(await url, {
+        const res = await (fetchApi?.fetch ?? fetch)(await url, {
           method,
           headers,
           body,
@@ -88,6 +96,7 @@ export class GraphQLEndpoints implements GraphQLBrowseApi {
       title,
       url = 'https://api.github.com/graphql',
       errorApi,
+      fetchApi,
       githubAuthApi,
     } = config;
     type ResponseBody = {
@@ -101,7 +110,7 @@ export class GraphQLEndpoints implements GraphQLBrowseApi {
         let retried = false;
 
         const doRequest = async (): Promise<any> => {
-          const res = await fetch(url, {
+          const res = await (fetchApi?.fetch ?? fetch)(url, {
             method: 'POST',
             headers: {
               'Content-Type': 'application/json',