Merge pull request #19924 from grantila/grantila/use-fetch-api-in-graphiql

Allow using FetchApi in graphiql api setup

.changeset/chilled-beds-exist.md

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

packages/app/src/apis.ts

@@ -33,6 +33,7 @@ import {
   createApiFactory,
   discoveryApiRef,
   errorApiRef,
+  fetchApiRef,
   githubAuthApiRef,
 } from '@backstage/core-plugin-api';
 import { AuthProxyDiscoveryApi } from './AuthProxyDiscoveryApi';
@@ -53,18 +54,24 @@ export const apis: AnyApiFactory[] = [
 
   createApiFactory({
     api: graphQlBrowseApiRef,
-    deps: { errorApi: errorApiRef, githubAuthApi: githubAuthApiRef },
-    factory: ({ errorApi, githubAuthApi }) =>
+    deps: {
+      errorApi: errorApiRef,
+      fetchApi: fetchApiRef,
+      githubAuthApi: githubAuthApiRef,
+    },
+    factory: ({ errorApi, fetchApi, githubAuthApi }) =>
       GraphQLEndpoints.from([
         GraphQLEndpoints.create({
           id: 'gitlab',
           title: 'GitLab',
           url: 'https://gitlab.com/api/graphql',
+          fetchApi,
         }),
         GraphQLEndpoints.github({
           id: 'github',
           title: 'GitHub',
           errorApi,
+          fetchApi,
           githubAuthApi,
         }),
       ]),

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',