_{If you're looking for the GraphiQL repository, go to https://github.com/graphql/graphiql.}

---

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.

``sh
npm i @edgeandnode/graphiql-playground graphql-ws
`

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

`ts
const Playground = () => {
return (
fetcher={{
url: 'https://api.thegraph.com/subgraphs/name/graphprotocol/graph-network-mainnet-staging',
}}
queries={savedQueries}
currentQueryId={currentQueryId}
header={
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`.