diff --git a/plugins/graphiql/.eslintrc.js b/plugins/graphiql/.eslintrc.js
new file mode 100644
index 0000000000..6a513fbafe
--- /dev/null
+++ b/plugins/graphiql/.eslintrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+ extends: [require.resolve('@backstage/cli/config/eslint')],
+ rules: {
+ // Prefer to use rendered.getBy*, which will throw an error
+ 'jest/expect-expect': 0,
+ },
+};
diff --git a/plugins/graphiql/README.md b/plugins/graphiql/README.md
new file mode 100644
index 0000000000..d2f8cafbfb
--- /dev/null
+++ b/plugins/graphiql/README.md
@@ -0,0 +1,64 @@
+# @backstage/plugin-graphiql
+
+This plugin integrates [GraphiQL](https://github.com/graphql/graphiql) as a tool to browse GraphiQL endpoints inside Backstage.
+
+The purpose of the plugin is to provide a convenient way for developers to try out GraphQL queries in their own environment.
+By exposing GraphiQL as a plugin instead of a standalone app, it's possible to provide a preconfigured environment for engineers, and also tie into authentication providers already inside Backstage.
+
+## Getting Started
+
+### Installing the plugin
+
+Start out by installing the plugin in your Backstage app:
+
+```bash
+yarn add @backstage/plugin-graphiql
+```
+
+Then add an entry to your App's `plugins.ts` to import the plugin.
+
+The plugin registers a `/graphiql` route, which you can link to from the Sidebar if desired.
+
+### 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.
+
+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:
+
+```tsx
+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);
+```
diff --git a/plugins/graphiql/dev/index.tsx b/plugins/graphiql/dev/index.tsx
new file mode 100644
index 0000000000..ed987c1c6a
--- /dev/null
+++ b/plugins/graphiql/dev/index.tsx
@@ -0,0 +1,69 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { FC } from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
+import HomeIcon from '@material-ui/icons/Home';
+import { ThemeProvider, CssBaseline } from '@material-ui/core';
+import {
+ createApp,
+ SidebarPage,
+ Sidebar,
+ SidebarItem,
+ SidebarSpacer,
+ ApiRegistry,
+} from '@backstage/core';
+import { lightTheme } from '@backstage/theme';
+import { plugin, GraphQLEndpoints, graphQlBrowseApiRef } from '../src';
+
+const graphQlBrowseApi = GraphQLEndpoints.from([
+ GraphQLEndpoints.create({
+ id: 'gitlab',
+ title: 'GitLab',
+ url: 'https://gitlab.com/api/graphql',
+ }),
+ GraphQLEndpoints.create({
+ id: 'countries',
+ title: 'Countries',
+ url: 'https://countries.trevorblades.com/',
+ }),
+]);
+
+const app = createApp();
+app.registerApis(ApiRegistry.from([[graphQlBrowseApiRef, graphQlBrowseApi]]));
+app.registerPlugin(plugin);
+const AppComponent = app.build();
+
+const App: FC<{}> = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+ReactDOM.render(, document.getElementById('root'));
diff --git a/plugins/graphiql/package.json b/plugins/graphiql/package.json
new file mode 100644
index 0000000000..f2cf8b7930
--- /dev/null
+++ b/plugins/graphiql/package.json
@@ -0,0 +1,55 @@
+{
+ "name": "@backstage/plugin-graphiql",
+ "description": "Backstage plugin for browsing GraphQL APIs",
+ "version": "0.1.1-alpha.4",
+ "private": false,
+ "publishConfig": {
+ "access": "public"
+ },
+ "homepage": "https://github.com/spotify/backstage/tree/master/plugins/graphiql#readme",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/spotify/backstage",
+ "directory": "plugins/graphiql"
+ },
+ "keywords": [
+ "backstage"
+ ],
+ "license": "Apache-2.0",
+ "main": "dist/index.cjs.js",
+ "types": "dist/index.d.ts",
+ "scripts": {
+ "build": "backstage-cli plugin:build",
+ "start": "backstage-cli plugin:serve",
+ "lint": "backstage-cli lint",
+ "test": "backstage-cli test",
+ "clean": "backstage-cli clean"
+ },
+ "devDependencies": {
+ "@backstage/cli": "^0.1.1-alpha.4",
+ "@testing-library/jest-dom": "^4.2.4",
+ "@testing-library/react": "^9.3.2",
+ "@testing-library/user-event": "^7.1.2",
+ "@types/jest": "^24.0.0",
+ "@types/node": "^12.0.0",
+ "@types/testing-library__jest-dom": "5.0.2",
+ "jest-fetch-mock": "^3.0.3",
+ "react-router-dom": "^5.1.2"
+ },
+ "dependencies": {
+ "@backstage/core": "^0.1.1-alpha.4",
+ "@backstage/test-utils": "^0.1.1-alpha.4",
+ "@backstage/theme": "^0.1.1-alpha.4",
+ "@material-ui/core": "^4.9.1",
+ "@material-ui/icons": "^4.9.1",
+ "@material-ui/lab": "4.0.0-alpha.45",
+ "graphiql": "^1.0.0-alpha.8",
+ "graphql": "15.0.0",
+ "react": "16.13.1",
+ "react-dom": "16.13.1",
+ "react-use": "^13.0.0"
+ },
+ "files": [
+ "dist"
+ ]
+}
diff --git a/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.test.tsx b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.test.tsx
new file mode 100644
index 0000000000..1726c188c0
--- /dev/null
+++ b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.test.tsx
@@ -0,0 +1,57 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { GraphiQLBrowser } from './GraphiQLBrowser';
+import { ThemeProvider } from '@material-ui/core';
+import { lightTheme } from '@backstage/theme';
+
+jest.mock('graphiql', () => () => '');
+
+describe('GraphiQLBrowser', () => {
+ it('should render error text if there are no endpoints', () => {
+ const rendered = render(
+
+
+ ,
+ );
+ rendered.getByText('No endpoints available');
+ });
+
+ it('should render endpoint tabs', () => {
+ const rendered = render(
+
+
+ ,
+ );
+ rendered.getByText('Endpoint A');
+ rendered.getByText('Endpoint B');
+ });
+});
diff --git a/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx
new file mode 100644
index 0000000000..e914fd9649
--- /dev/null
+++ b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx
@@ -0,0 +1,77 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { FC, useState } from 'react';
+import { Tabs, Tab, makeStyles, Typography, Divider } from '@material-ui/core';
+import 'graphiql/graphiql.css';
+import GraphiQL from 'graphiql';
+import { StorageBucket } from 'lib/storage';
+import { GraphQLEndpoint } from 'lib/api';
+import { BackstageTheme } from '@backstage/theme';
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ height: '100%',
+ display: 'flex',
+ flexFlow: 'column nowrap',
+ },
+ tabs: {
+ background: theme.palette.background.paper,
+ },
+ graphiQlWrapper: {
+ flex: 1,
+ '@global': {
+ '.graphiql-container': {
+ boxSizing: 'initial',
+ },
+ },
+ },
+}));
+
+type GraphiQLBrowserProps = {
+ endpoints: GraphQLEndpoint[];
+};
+
+export const GraphiQLBrowser: FC = ({ endpoints }) => {
+ const classes = useStyles();
+ const [tabIndex, setTabIndex] = useState(0);
+
+ if (!endpoints.length) {
+ return No endpoints available;
+ }
+
+ const { id, fetcher } = endpoints[tabIndex];
+ const storage = StorageBucket.forLocalStorage(`plugin/graphiql/data/${id}`);
+
+ return (
+
+
setTabIndex(value)}
+ indicatorColor="primary"
+ >
+ {endpoints.map(({ title }, index) => (
+
+ ))}
+
+
+
+
+
+