remove general fetch, convert to specific GithubApi fetch hook

packages/app/src/scaffolder/GithubQuery/GithubQueryExtension.tsx

@@ -1,16 +1,15 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React, { useCallback, useMemo, useState } from 'react';
 import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import Input from '@material-ui/core/Input';
 import InputLabel from '@material-ui/core/InputLabel';
 import { FieldExtensionComponentProps } from '@backstage/plugin-scaffolder-react';
-// eslint-disable-next-line import/no-extraneous-dependencies
+
 import Autocomplete from '@material-ui/lab/Autocomplete';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { TextField } from '@material-ui/core';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import {
-  useFetchWithAuth,
+  useGithubApi,
   RequestUserCredentials,
 } from 'scaffolder-frontend-auth';
 
@@ -26,21 +25,9 @@ export const GithubQuery = (props: FieldExtensionComponentProps<string>) => {
       ? (uiOptions?.requestUserCredentials as RequestUserCredentials)
       : undefined;
 
-  const { value, loading, error } = useFetchWithAuth({
-    url: 'https://github.com',
+  const { value, loading, error } = useGithubApi({
     requestUserCredentials,
-    fetchOpts: {
-      url: `https://api.github.com/orgs/${owner}/repos`,
-      options: {
-        headers: {
-          Accept: 'application/vnd.github+json',
-          Authorization: 'Bearer ',
-          // this isn't allowed so *shrugs*
-          // per_page: '100',
-        },
-      },
-      headersRequiringToken: ['Authorization'],
-    },
+    queryUrl: `orgs/${owner}/repos`,
   });
 
   const onSelect = useCallback(

plugins/scaffolder-frontend-auth/README.md

@@ -2,11 +2,6 @@
 
 _This package was created through the Backstage CLI_.
 
-## Installation
+## About
 
-Install the package via Yarn:
-
-```sh
-cd <package-dir> # if within a monorepo
-yarn add scaffolder-frontend-auth
-```
+This plugin is not currently published, and intended as an experimentation in hooks to grab a token and use it in a fetch call within a scaffolder workflow.

plugins/scaffolder-frontend-auth/src/hooks/useAuth.tsx

@@ -39,7 +39,7 @@ export const useAuth = ({
       setToken(token);
     },
     500,
-    [localToken],
+    [localToken, requestUserCredentials],
   );
 
   return localToken ? localToken : undefined;

plugins/scaffolder-frontend-auth/src/hooks/useGithubApi.tsx

@@ -0,0 +1,45 @@
+import useAsync from 'react-use/lib/useAsync';
+import { useAuth } from './useAuth';
+
+export type RequestUserCredentials = {
+  additionalScopes: Record<string, string[]>;
+  secretsKey: string;
+};
+
+export const useGithubApi = ({
+  requestUserCredentials,
+  queryUrl,
+  method = 'GET',
+}: {
+  requestUserCredentials?: RequestUserCredentials;
+  queryUrl: string;
+  method?: 'GET' | 'HEAD' | 'PATCH' | 'POST' | 'PUT' | 'DELETE';
+}) => {
+  const token = useAuth({ url: 'https://github.com', requestUserCredentials });
+
+  const { value, loading, error } = useAsync(async (): Promise<any> => {
+    if (token) {
+      const response = await fetch(
+        `https://api.github.com/${
+          queryUrl.startsWith('/') ? queryUrl.slice(1) : queryUrl
+        }`,
+        {
+          method,
+          headers: {
+            Accept: 'application/vnd.github+json',
+            Authorization: `Bearer ${token}`,
+          },
+        },
+      );
+
+      if (!response.ok) {
+        throw new Error(`unable to fetch from ${queryUrl}`);
+      }
+
+      return response.json();
+    }
+    return undefined;
+  }, [token]);
+
+  return { value, loading, error };
+};

plugins/scaffolder-frontend-auth/src/index.ts

@@ -1,2 +1,2 @@
 export { useAuth, type RequestUserCredentials } from './hooks/useAuth';
-export { useFetchWithAuth } from './hooks/useFetchWithAuth';
+export { useGithubApi } from './hooks/useGithubApi';