app: add graphiql plugin with gitlab and github endpoints

packages/app/package.json

@@ -9,6 +9,7 @@
     "@backstage/plugin-circleci": "^0.1.1-alpha.12",
     "@backstage/plugin-explore": "^0.1.1-alpha.12",
     "@backstage/plugin-gitops-profiles": "^0.1.1-alpha.12",
+    "@backstage/plugin-graphiql": "^0.1.1-alpha.12",
     "@backstage/plugin-lighthouse": "^0.1.1-alpha.12",
     "@backstage/plugin-register-component": "^0.1.1-alpha.12",
     "@backstage/plugin-scaffolder": "^0.1.1-alpha.12",

packages/app/src/apis.ts

@@ -45,6 +45,10 @@ import { CircleCIApi, circleCIApiRef } from '@backstage/plugin-circleci';
 import { catalogApiRef, CatalogClient } from '@backstage/plugin-catalog';
 
 import { gitOpsApiRef, GitOpsRestApi } from '@backstage/plugin-gitops-profiles';
+import {
+  graphQlBrowseApiRef,
+  GraphQLEndpoints,
+} from '@backstage/plugin-graphiql';
 
 export const apis = (config: ConfigApi) => {
   // eslint-disable-next-line no-console
@@ -78,7 +82,7 @@ export const apis = (config: ConfigApi) => {
     }),
   );
 
-  builder.add(
+  const githubAuthApi = builder.add(
     githubAuthApiRef,
     GithubAuth.create({
       apiOrigin: 'http://localhost:7000',
@@ -105,5 +109,22 @@ export const apis = (config: ConfigApi) => {
 
   builder.add(gitOpsApiRef, new GitOpsRestApi('http://localhost:3008'));
 
+  builder.add(
+    graphQlBrowseApiRef,
+    GraphQLEndpoints.from([
+      GraphQLEndpoints.create({
+        id: 'gitlab',
+        title: 'GitLab',
+        url: 'https://gitlab.com/api/graphql',
+      }),
+      GraphQLEndpoints.github({
+        id: 'github',
+        title: 'GitHub',
+        errorApi,
+        githubAuthApi,
+      }),
+    ]),
+  );
+
   return builder.build();
 };

packages/app/src/components/Root/Root.tsx

@@ -39,6 +39,7 @@ import {
   SidebarPinButton,
 } from '@backstage/core';
 import { NavLink } from 'react-router-dom';
+import { graphiQLRouteRef } from '@backstage/plugin-graphiql';
 
 const useSidebarLogoStyles = makeStyles({
   root: {
@@ -94,6 +95,11 @@ const Root: FC<{}> = ({ children }) => (
       <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
       <SidebarItem icon={RuleIcon} to="lighthouse" text="Lighthouse" />
       <SidebarItem icon={BuildIcon} to="circleci" text="CircleCI" />
+      <SidebarItem
+        icon={graphiQLRouteRef.icon!}
+        to={graphiQLRouteRef.path}
+        text={graphiQLRouteRef.title}
+      />
       <SidebarSpace />
       <SidebarDivider />
       <SidebarThemeToggle />

packages/app/src/plugins.ts

@@ -24,3 +24,4 @@ export { plugin as RegisterComponent } from '@backstage/plugin-register-componen
 export { plugin as Sentry } from '@backstage/plugin-sentry';
 export { plugin as GitopsProfiles } from '@backstage/plugin-gitops-profiles';
 export { plugin as TechDocs } from '@backstage/plugin-techdocs';
+export { plugin as GraphiQL } from '@backstage/plugin-graphiql';