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

yarn.lock

@@ -9434,20 +9434,13 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
-"@types/react-dom@*", "@types/react-dom@<18.0.0":
-  version "17.0.18"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.18.tgz#8f7af38f5d9b42f79162eea7492e5a1caff70dc2"
-  integrity sha512-rLVtIfbwyur2iFKykP2w0pl/1unw26b5td16d5xMgp7/yjTHomkyxPYChFoCr/FtEX1lN9wY6lFj1qvKdS5kDw==
+"@types/react-dom@*", "@types/react-dom@<18.0.0", "@types/react-dom@^17", "@types/react-dom@^18.0.0":
+  version "17.0.19"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.19.tgz#36feef3aa35d045cacd5ed60fe0eef5272f19492"
+  integrity sha512-PiYG40pnQRdPHnlf7tZnp0aQ6q9tspYr72vD61saO6zFCybLfMqwUCN0va1/P+86DXn18ZWeW30Bk7xlC5eEAQ==
   dependencies:
     "@types/react" "^17"
 
-"@types/react-dom@^18.0.0":
-  version "18.0.10"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.10.tgz#3b66dec56aa0f16a6cc26da9e9ca96c35c0b4352"
-  integrity sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-redux@^7.1.20":
   version "7.1.24"
   resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.24.tgz#6caaff1603aba17b27d20f8ad073e4c077e975c0"
@@ -15571,21 +15564,11 @@ graphql-ws@^5.4.1:
   resolved "https://registry.yarnpkg.com/graphql-ws/-/graphql-ws-5.9.1.tgz#9c0fa48ceb695d61d574ed3ab21b426729e87f2d"
   integrity sha512-mL/SWGBwIT9Meq0NlfS55yXXTOeWPMbK7bZBEZhFu46bcGk1coTx2Sdtzxdk+9yHWngD+Fk1PZDWaAutQa9tpw==
 
-graphql@*, "graphql@^15.0.0 || ^16.0.0", graphql@^16.0.0, graphql@^16.3.0, graphql@^16.5.0, graphql@^16.6.0:
+graphql@*, [email protected], "graphql@^15.0.0 || ^16.0.0", graphql@^15.5.0, graphql@^15.5.1, graphql@^16.0.0, graphql@^16.3.0, graphql@^16.5.0, graphql@^16.6.0:
   version "16.6.0"
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.6.0.tgz#c2dcffa4649db149f6282af726c8c83f1c7c5fdb"
   integrity sha512-KPIBPDlW7NxrbT/eh4qPXz5FiFdL5UbaA0XUNz2Rp3Z3hqBSkbj0GVjwFDztsWVauZUWsbKHgMg++sk8UX0bkw==
 
-[email protected]:
-  version "16.5.0"
-  resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.5.0.tgz#41b5c1182eaac7f3d47164fb247f61e4dfb69c85"
-  integrity sha512-qbHgh8Ix+j/qY+a/ZcJnFQ+j8ezakqPiHwPiZhV/3PgGlgf96QMBB5/f2rkiC9sgLoy/xvT6TSiaf2nTHJh5iA==
-
-graphql@^15.5.0, graphql@^15.5.1:
-  version "15.8.0"
-  resolved "https://registry.yarnpkg.com/graphql/-/graphql-15.8.0.tgz#33410e96b012fa3bdb1091cc99a94769db212b38"
-  integrity sha512-5gghUc24tP9HRznNpV2+FIoq3xKkj5dTQqf4v0CpdPbFVwFkWoxOM+o+2OC9ZSvjEMTjfmG9QT+gcvggTwW1zw==
-
 gtoken@^6.0.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/gtoken/-/gtoken-6.1.0.tgz#62938c679b364662ce21077858e0db3cfe025363"