Merge pull request #17589 from MattheusHenrique/docs/apollo-explorer

docs(apollo-explorer-README): Add snippet with import
2023-05-04 11:56:56 +02:00
parent 923fc8584a 5b37887ccb
commit 487daf8261
1 changed files with 15 additions and 10 deletions
@@ -38,17 +38,22 @@ yarn --cwd packages/app add @backstage/plugin-apollo-explorer
 Then, in `packages/app/src/App.tsx` add the plugin as a `Route`

 ```typescript
-<Route
-  path="/apollo-explorer"
-  element={
-    <ApolloExplorerPage
-      endpoints={[
-        { title: 'Github', graphRef: 'my-github-graph-ref@current' },
-        { title: 'Linear', graphRef: 'my-linear-graph-ref@current' },
-      ]}
+import { ApolloExplorerPage } from '@backstage/plugin-apollo-explorer';
+
+const routes = (
+  <FlatRoutes>
+    {/* other routes... */}
+    <Route
+      path="/apollo-explorer"
+      element={
+        <ApolloExplorerPage
+          endpoints={[
+            { title: 'Github', graphRef: 'my-github-graph-ref@current' },
+            { title: 'Linear', graphRef: 'my-linear-graph-ref@current' },
+          ]}
+        />
+      }
    />
-  }
-/>
 ```

 Then, in `packages/app/src/components/Root/Root.tsx` add a sidebar item so users can find your beautiful plugin!