graphiql: migrate to use plugin-api

Co-authored-by: Juan Lulkin <jmaiz@spotify.com>
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx

@@ -14,14 +14,8 @@
  * limitations under the License.
  */
 import React from 'react';
-import {
-  Content,
-  Header,
-  HeaderLabel,
-  Page,
-  Progress,
-  useApi,
-} from '@backstage/core';
+import { Content, Header, HeaderLabel, Page, Progress } from '@backstage/core';
+import { useApi } from '@backstage/plugin-api';
 import { useAsync } from 'react-use';
 import 'graphiql/graphiql.css';
 import { graphQlBrowseApiRef } from '../../lib/api';

plugins/graphiql/src/lib/api/GraphQLEndpoints.ts

@@ -15,7 +15,7 @@
  */
 
 import { GraphQLBrowseApi, GraphQLEndpoint } from './types';
-import { ErrorApi, OAuthApi } from '@backstage/core';
+import { ErrorApi, OAuthApi } from '@backstage/plugin-api';
 
 // Helper for generic http endpoints
 export type EndpointConfig = {

plugins/graphiql/src/lib/api/types.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { createApiRef } from '@backstage/core';
+import { createApiRef } from '@backstage/plugin-api';
 
 export type GraphQLEndpoint = {
   // Will be used as unique key for storing history and query data
@@ -35,5 +35,4 @@ export type GraphQLBrowseApi = {
 
 export const graphQlBrowseApiRef = createApiRef<GraphQLBrowseApi>({
   id: 'plugin.graphiql.browse',
-  description: 'Used to supply GraphQL endpoints for browsing',
 });

plugins/graphiql/src/plugin.ts

@@ -18,7 +18,7 @@ import {
   createPlugin,
   createApiFactory,
   createRoutableExtension,
-} from '@backstage/core';
+} from '@backstage/plugin-api';
 import { graphQlBrowseApiRef, GraphQLEndpoints } from './lib/api';
 import { graphiQLRouteRef } from './route-refs';
 

plugins/graphiql/src/route-refs.tsx

@@ -14,11 +14,8 @@
  * limitations under the License.
  */
 
-import { createRouteRef } from '@backstage/core';
-import GraphiQLIcon from './assets/graphiql.icon.svg';
+import { createRouteRef } from '@backstage/plugin-api';
 
 export const graphiQLRouteRef = createRouteRef({
-  icon: GraphiQLIcon,
-  path: '/graphiql',
-  title: 'GraphiQL',
+  id: 'graphiql-root',
 });