GraphQL Schema Viewer

View your GraphQL schema interactively.

Installation

Install using your package manager:

yarn add react react-dom react-router react-router-dom @emotion/styled @emotion/react @solo.io/graphql-schema-viewer

Then import styles in your app, where this package is used:

import "@solo.io/graphql-schema-viewer/styles.css";
// ...rest of file

Usage

const sdl = `# The query type, represents all of the entry points into our object graph
type Query {
  pets: [Pet]
  pet(id: Int!): Pet
}

type Mutation {
  addPet(pet: InputPet!): Pet
}

type Pet {
  id: ID!
  name: String!
}

input InputPet {
  id: ID!
  name: String!
  tag: String
}
`;

const App = () => {
  return <GraphqlSchemaViewer sdl={sdl} />;
};