core-api,plugins/graphiql: export extension APIs from core-api and port the graphiql plugin

Co-authored-by: blam <ben@blam.sh>

packages/app/src/App.tsx

@@ -29,7 +29,7 @@ import { hot } from 'react-hot-loader/root';
 import { providers } from './identityProviders';
 import { Router as CatalogRouter } from '@backstage/plugin-catalog';
 import { Router as DocsRouter } from '@backstage/plugin-techdocs';
-import { Router as GraphiQLRouter } from '@backstage/plugin-graphiql';
+import { GraphiQLPage } from '@backstage/plugin-graphiql';
 import { Router as TechRadarRouter } from '@backstage/plugin-tech-radar';
 import { Router as LighthouseRouter } from '@backstage/plugin-lighthouse';
 import { Router as RegisterComponentRouter } from '@backstage/plugin-register-component';
@@ -81,7 +81,7 @@ const AppRoutes = () => (
       path="/tech-radar"
       element={<TechRadarRouter width={1500} height={800} />}
     />
-    <Route path="/graphiql" element={<GraphiQLRouter />} />
+    <Route path="/graphiql" element={<GraphiQLPage />} />
     <Route path="/lighthouse/*" element={<LighthouseRouter />} />
     <Route
       path="/register-component"

packages/core-api/src/public.ts

@@ -16,6 +16,7 @@
 
 export * from './apis';
 export * from './app';
+export * from './extensions';
 export * from './icons';
 export * from './plugin';
 export * from './routing';

packages/core-api/src/routing/index.ts

@@ -22,3 +22,4 @@ export type {
   MutableRouteRef,
 } from './types';
 export { createRouteRef } from './RouteRef';
+export { useRouteRef } from './hooks';

plugins/graphiql/src/index.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-export { plugin } from './plugin';
+export { plugin, GraphiQLPage } from './plugin';
 export { GraphiQLPage as Router } from './components';
 export * from './lib/api';
 export * from './route-refs';

plugins/graphiql/src/plugin.ts

@@ -14,8 +14,14 @@
  * limitations under the License.
  */
 
-import { createPlugin, createApiFactory } from '@backstage/core';
+import {
+  createPlugin,
+  createApiFactory,
+  createRoutableExtension,
+} from '@backstage/core';
+import { GraphiQLPage as Component } from './components';
 import { graphQlBrowseApiRef, GraphQLEndpoints } from './lib/api';
+import { graphiQLRouteRef } from './route-refs';
 
 export const plugin = createPlugin({
   id: 'graphiql',
@@ -33,3 +39,10 @@ export const plugin = createPlugin({
     ),
   ],
 });
+
+export const GraphiQLPage = plugin.provide(
+  createRoutableExtension({
+    component: Component,
+    mountPoint: graphiQLRouteRef,
+  }),
+);