diff --git a/plugins/graphiql/dev/index.tsx b/plugins/graphiql/dev/index.tsx
index 918695e0e0..7a50ed1afc 100644
--- a/plugins/graphiql/dev/index.tsx
+++ b/plugins/graphiql/dev/index.tsx
@@ -16,7 +16,8 @@
import React from 'react';
import { createDevApp } from '@backstage/dev-utils';
-import { githubAuthApiRef, errorApiRef } from '@backstage/core';
+import { githubAuthApiRef, errorApiRef } from '@backstage/plugin-api';
+import GraphiQLIcon from '../src/assets/graphiql.icon.svg';
import {
graphiqlPlugin,
GraphQLEndpoints,
@@ -55,6 +56,7 @@ createDevApp()
})
.addPage({
title: 'GraphiQL',
+ icon: GraphiQLIcon,
element: ,
})
.render();
diff --git a/plugins/graphiql/package.json b/plugins/graphiql/package.json
index 54f7b076c8..8e3ec7f4dd 100644
--- a/plugins/graphiql/package.json
+++ b/plugins/graphiql/package.json
@@ -32,6 +32,7 @@
},
"dependencies": {
"@backstage/core": "^0.7.11",
+ "@backstage/plugin-api": "^0.1.0",
"@backstage/theme": "^0.2.7",
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
diff --git a/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx b/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx
index 224def1d78..37522ebe41 100644
--- a/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx
+++ b/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';
diff --git a/plugins/graphiql/src/lib/api/GraphQLEndpoints.ts b/plugins/graphiql/src/lib/api/GraphQLEndpoints.ts
index 23a9e9e697..2f0e86ca7e 100644
--- a/plugins/graphiql/src/lib/api/GraphQLEndpoints.ts
+++ b/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 = {
diff --git a/plugins/graphiql/src/lib/api/types.ts b/plugins/graphiql/src/lib/api/types.ts
index dad06b8359..b968989d96 100644
--- a/plugins/graphiql/src/lib/api/types.ts
+++ b/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({
id: 'plugin.graphiql.browse',
- description: 'Used to supply GraphQL endpoints for browsing',
});
diff --git a/plugins/graphiql/src/plugin.ts b/plugins/graphiql/src/plugin.ts
index 42969999d9..7cf9e443c6 100644
--- a/plugins/graphiql/src/plugin.ts
+++ b/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';
diff --git a/plugins/graphiql/src/route-refs.tsx b/plugins/graphiql/src/route-refs.tsx
index 3e8d1d3a9c..8806bed826 100644
--- a/plugins/graphiql/src/route-refs.tsx
+++ b/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',
});