Setup graphql plugin

app-config.yaml

@@ -32,6 +32,11 @@ backend:
   database:
     client: better-sqlite3
     connection: ':memory:'
+  reading:
+    allow:
+      - host: https://demo.backstage.io
+        paths:
+          - /api/graphql/schema
 
 integrations:
   github:
@@ -83,6 +88,10 @@ catalog:
     - type: url
       target: https://github.com/backstage/backstage/blob/master/catalog-info.yaml
 
+    # The demo site
+    - type: url
+      target: https://github.com/backstage/demo/blob/master/catalog-info.yaml
+
 costInsights:
   engineerCost: 200000
   products:

catalog-info.yaml

@@ -1,11 +1,27 @@
 apiVersion: backstage.io/v1alpha1
 kind: Component
 metadata:
-  name: demo
+  name: backstage-demo
   description: An example deployment of a Backstage application.
   annotations:
     github.com/project-slug: backstage/demo
 spec:
   type: website
   owner: backstage/maintainers
   lifecycle: experimental
+  consumesApis:
+    - demo-graphql
+---
+apiVersion: backstage.io/v1alpha1
+kind: API
+metadata:
+  name: demo-graphql
+  description: GraphQL Backend Plugin
+spec:
+  type: graphql
+  lifecycle: production
+  owner: backstage/maintainers
+  apiConsumedBy:
+    - backstage-demo
+  definition:
+    $text: https://demo.backstage.io/api/graphql/schema

package.json

@@ -32,13 +32,15 @@
     "@types/hast": "^2.3.4",
     "@types/recharts": "^1.8.23",
     "@types/react": "^17.0.59",
-    "@types/unist": "^2.0.6"
+    "@types/unist": "^2.0.6",
+    "graphql": "^16.2.0"
   },
   "devDependencies": {
     "@backstage/cli": "^0.23.0",
     "@backstage/e2e-test-utils": "^0.1.0",
     "@playwright/test": "^1.32.3",
     "@spotify/prettier-config": "^7.0.0",
+    "@types/node": "^18.0.0",
     "concurrently": "^6.0.0",
     "eslint-plugin-jest": "*",
     "node-fetch": "^2.6.7",

packages/app/src/apis.ts

@@ -48,9 +48,14 @@ export const apis: AnyApiFactory[] = [
   }),
   createApiFactory({
     api: graphQlBrowseApiRef,
-    deps: { errorApi: errorApiRef, githubAuthApi: githubAuthApiRef },
-    factory: ({ errorApi, githubAuthApi }) =>
+    deps: { errorApi: errorApiRef, githubAuthApi: githubAuthApiRef, discoveryApi: discoveryApiRef },
+    factory: ({ errorApi, githubAuthApi, discoveryApi }) =>
       GraphQLEndpoints.from([
+        GraphQLEndpoints.create({
+          id: 'backstage',
+          title: 'GraphQL Backend',
+          url: discoveryApi.getBaseUrl('graphql')
+        }),
         GraphQLEndpoints.github({
           id: 'github',
           title: 'GitHub',

packages/backend/package.json

@@ -40,6 +40,8 @@
     "@backstage/plugin-search-backend-node": "^1.2.10",
     "@backstage/plugin-techdocs-backend": "^1.8.0",
     "@backstage/plugin-todo-backend": "^0.3.4",
+    "@frontside/backstage-plugin-graphql-backend": "^0.1.2",
+    "@frontside/backstage-plugin-graphql-backend-module-catalog": "^0.1.2",
     "app": "^0.0.0",
     "better-sqlite3": "^7.5.0",
     "dockerode": "^3.2.1",

packages/backend/src/index.ts

@@ -33,6 +33,8 @@ import search from './plugins/search';
 import techdocs from './plugins/techdocs';
 import todo from './plugins/todo';
 import { DefaultIdentityClient } from '@backstage/plugin-auth-node';
+import { CatalogClient } from '@backstage/catalog-client';
+import graphql from './plugins/graphql';
 
 function makeCreateEnv(config: Config) {
   const root = getRootLogger();
@@ -45,6 +47,9 @@ function makeCreateEnv(config: Config) {
     discovery,
     tokenManager,
   });
+  const catalogClient = new CatalogClient({
+    discoveryApi: discovery,
+  });
   const cacheManager = CacheManager.fromConfig(config);
   const taskScheduler = TaskScheduler.fromConfig(config, { databaseManager });
   const identity = DefaultIdentityClient.create({
@@ -68,6 +73,7 @@ function makeCreateEnv(config: Config) {
       permissions,
       scheduler,
       identity,
+      catalogClient,
     };
   };
 }
@@ -88,6 +94,7 @@ async function main() {
   const appEnv = createEnv('app');
   const badgesEnv = createEnv('badges');
   const exploreEnv = createEnv('explore');
+  const graphqlEnv = createEnv('graphql');
 
   const apiRouter = Router();
   apiRouter.use('/catalog', await catalog(catalogEnv));
@@ -98,6 +105,7 @@ async function main() {
   apiRouter.use('/proxy', await proxy(proxyEnv));
   apiRouter.use('/badges', await badges(badgesEnv));
   apiRouter.use('/explore', await explore(exploreEnv));
+  apiRouter.use('/graphql', await graphql(graphqlEnv));
   apiRouter.use(notFoundHandler());
 
   const service = createServiceBuilder(module)

packages/backend/src/plugins/graphql.ts

@@ -0,0 +1,18 @@
+import { createRouter } from '@frontside/backstage-plugin-graphql-backend';
+import {
+  createCatalogLoader,
+  Catalog,
+} from '@frontside/backstage-plugin-graphql-backend-module-catalog';
+import { Router } from 'express';
+import { PluginEnvironment } from '../types';
+
+export default async function createPlugin({
+  logger,
+  catalogClient,
+}: PluginEnvironment): Promise<Router> {
+  return await createRouter({
+    modules: [Catalog()],
+    logger,
+    loaders: { ...createCatalogLoader(catalogClient) },
+  });
+}

packages/backend/src/types.ts

@@ -11,6 +11,7 @@ import { IdentityApi } from '@backstage/plugin-auth-node';
 import { Logger } from 'winston';
 import { PermissionEvaluator } from '@backstage/plugin-permission-common';
 import { PluginTaskScheduler } from '@backstage/backend-tasks';
+import { CatalogClient } from '@backstage/catalog-client';
 
 export type PluginEnvironment = {
   logger: Logger;
@@ -23,4 +24,5 @@ export type PluginEnvironment = {
   scheduler: PluginTaskScheduler;
   permissions: PermissionEvaluator;
   identity: IdentityApi;
+  catalogClient: CatalogClient;
 };