The Graph GraphiQL Playground

Configuration, styling and extensions for the GraphiQL Playground component embedded in The Graph Protocol applications

Usage

Install @edgeandnode/graphiql-playground and graphql-ws with your favorite package manager.

npm i @edgeandnode/graphiql-playground graphql-ws

Then, import GraphProtocolGraphiQL and use it in your React components.

const Playground = () => {
  return (
    <GraphProtocolGraphiQL
      fetcher={{
        url: 'https://api.thegraph.com/subgraphs/name/graphprotocol/graph-network-mainnet-staging',
      }}
      queries={savedQueries}
      currentQueryId={currentQueryId}
      header={
        <GraphProtocolGraphiQL.SavedQueriesToolbar
          isMobile={false}
          isOwner={true}
          onSelectQuery={onSelectQuery}
          onSaveAsNewQuery={onSaveAsNewQuery}
          onDeleteQuery={onDeleteQuery}
          onSetQueryAsDefault={onSetQueryAsDefault}
          onUpdateQuery={onUpdateQuery}
        />
      }
    />
  )
}

You can find example implementation in ./apps/boom/playground.tsx

Contributing

• This library exports one React component named GraphProtocolGraphiQL, built using @graphiql/react, @graphiql/plugin-explorer and @graphiql/toolkit.
• It's meant to be used instead of graphiql package in The Graph Protocol applications.
• Install the dependencies and run scripts from package.json using pnpm.