From f294967b480d146598ae5c56f03404bb7b23d807 Mon Sep 17 00:00:00 2001
From: "mattheus.henrique" <mattheus.henrique@instruct.com.br>
Date: Mon, 1 May 2023 01:31:15 -0300
Subject: [PATCH] docs(apollo-explorer-README): Add snippet with import

Signed-off-by: MattheusHenrique <mattheushenriqueramos@gmail.com>
---
 plugins/apollo-explorer/README.md | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/plugins/apollo-explorer/README.md b/plugins/apollo-explorer/README.md
index 98f3116966..97f53485be 100644
--- a/plugins/apollo-explorer/README.md
+++ b/plugins/apollo-explorer/README.md
@@ -38,17 +38,25 @@ 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' },
-      ]}
+// In packages/app/src/App.tsx
+import { ApolloExplorerPage } from '@backstage/plugin-apollo-explorer';
+
+// You can add the tab to any number of pages, the service page is shown as an
+// example here
+const routes = (
+  <FlatRoutes>
+    {/* other tabs... */}
+    <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!