graphiql: update readme

.changeset/many-dodos-scream.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-graphiql': patch
+---
+
+Updated README

plugins/graphiql/README.md

@@ -12,53 +12,64 @@ By exposing GraphiQL as a plugin instead of a standalone app, it's possible to p
 Start out by installing the plugin in your Backstage app:
 
 ```bash
+cd packages/app
 yarn add @backstage/plugin-graphiql
 ```
 
-Then add an entry to your App's `plugins.ts` to import the plugin.
+```diff
+# in packages/app/src/plugins.ts
++export { plugin as GraphiQL } from '@backstage/plugin-graphiql';
+```
 
-The plugin registers a `/graphiql` route, which you can link to from the Sidebar if desired.
+```diff
+# in packages/app/src/App.tsx
++import { Router as GraphiQLRouter } from '@backstage/plugin-graphiql';
+
+ const AppRoutes = () => (
+   <Routes>
++    <Route path="/graphiql" element={<GraphiQLRouter />} />
+```
 
 ### Adding GraphQL endpoints
 
-For the plugin to function, you need to supply GraphQL endpoints through the GraphQLBrowse API, which is done by implementing the `GraphQLBrowseApi` exported by this plugin.
+For the plugin to function, you need to supply GraphQL endpoints through the GraphQLBrowse API. This is done by implementing the `graphQlBrowseApiRef` exported by this plugin.
 
-If all you need is a static list of endpoints, the plugin exports a `GraphQLEndpoints` class that implements the `GraphQLBrowseApi` for you. Here's and example of how you could expose two GraphQL endpoints in your App:
+If all you need is a static list of endpoints, the plugin exports a `GraphQLEndpoints` class that implements the `GraphQLBrowseApi` for you. Here's an example of how you could expose two GraphQL endpoints in your App:
 
-```tsx
-import {
-  graphQlBrowseApiRef,
-  GraphQLEndpoints,
-} from '@backstage/plugin-graphiql';
+```diff
+# in packages/app/src/apis.ts
++import {
++  graphQlBrowseApiRef,
++  GraphQLEndpoints,
++} from '@backstage/plugin-graphiql';
 
-// Implement the Graph QL browse API using a static list of endpoints
-const graphQlBrowseApi = GraphQLEndpoints.from([
-  // Use the .create function if all you need is a static URL and headers.
-  GraphQLEndpoints.create({
-    id: 'gitlab',
-    title: 'GitLab',
-    url: 'https://gitlab.com/api/graphql',
-    // Optional extra headers
-    headers: { Extra: 'Header' },
-  }),
-  {
-    id: 'hooli-search',
-    title: 'Hooli Search',
-    // Custom fetch function, this one is equivalent to using GraphQLEndpoints.create()
-    // with url set to https://internal.hooli.com/search
-    fetcher: async (params: any) => {
-      return fetch('https://internal.hooli.com/search', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(params),
-      }).then(res => res.json());
-    },
-  },
-]);
-
-// ApiRegistry builder created somewhere in your App
-const builder = ApiRegistry.builder();
-
-// Add the instance to the API registry
-builder.add(graphQlBrowseApiRef, graphQlBrowseApi);
+  export const apis = [
++   createApiFactory({
++     api: graphQlBrowseApiRef,
++     deps: { errorApi: errorApiRef, githubAuthApi: githubAuthApiRef },
++     factory: ({ errorApi, githubAuthApi }) =>
++       GraphQLEndpoints.from([
++         // Use the .create function if all you need is a static URL and headers.
++         GraphQLEndpoints.create({
++           id: 'gitlab',
++           title: 'GitLab',
++           url: 'https://gitlab.com/api/graphql',
++           // Optional extra headers
++           headers: { Extra: 'Header' },
++         }),
++         {
++           id: 'hooli-search',
++           title: 'Hooli Search',
++           // Custom fetch function, this one is equivalent to using GraphQLEndpoints.create()
++           // with url set to https://internal.hooli.com/search
++           fetcher: async (params: any) => {
++             return fetch('https://internal.hooli.com/search', {
++               method: 'POST',
++               headers: { 'Content-Type': 'application/json' },
++               body: JSON.stringify(params),
++             }).then(res => res.json());
++           },
++         }
++       ]),
++   }),
 ```

plugins/graphiql/src/plugin.ts

@@ -25,7 +25,8 @@ import { graphiQLRouteRef } from './route-refs';
 export const plugin = createPlugin({
   id: 'graphiql',
   apis: [
-    // GitLab is used as an example endpoint, but most plug
+    // GitLab is used as an example endpoint, but most will want to plug in
+    // their own instead.
     createApiFactory(
       graphQlBrowseApiRef,
       GraphQLEndpoints.from([