Add createPageExtension

Co-authored-by: Patrik Oldsberg <poldsberg@gmail.com>
Co-authored-by: Johan Haals <johan.haals@gmail.com>
Signed-off-by: Fredrik Adelöw <freben@gmail.com>

packages/app-next/src/examples/graphiqlPlugin.tsx

@@ -15,25 +15,15 @@
  */
 
 import {
-  createExtension,
+  createPageExtension,
   createPlugin,
-  coreExtensionData,
-  createSchemaFromZod,
 } from '@backstage/frontend-plugin-api';
-import { Router as GraphiQLPage } from '@backstage/plugin-graphiql';
+import React from 'react';
 
-export const GraphiqlPageExtension = createExtension({
-  output: {
-    component: coreExtensionData.reactComponent,
-    path: coreExtensionData.routePath,
-  },
-  configSchema: createSchemaFromZod(z =>
-    z.object({ path: z.string().default('/graphiql') }),
-  ),
-  factory({ bind, config }) {
-    bind.component(GraphiQLPage);
-    bind.path(config.path);
-  },
+export const GraphiqlPage = createPageExtension({
+  defaultPath: '/graphiql',
+  component: () =>
+    import('@backstage/plugin-graphiql').then(({ Router }) => <Router />),
 });
 
 export const graphiqlPlugin = createPlugin({
@@ -42,7 +32,7 @@ export const graphiqlPlugin = createPlugin({
     {
       id: 'graphiql.page',
       at: 'core.router/routes',
-      extension: GraphiqlPageExtension,
+      extension: GraphiqlPage,
     },
   ],
 });