Skip to content

GraphiQL Playground component embedded in The Graph Protocol applications

License

Notifications You must be signed in to change notification settings

edgeandnode/graphiql-playground

Repository files navigation

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

image

Usage

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

npm i @edgeandnode/graphiql-playground

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 /demo/.index.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.

About

GraphiQL Playground component embedded in The Graph Protocol applications

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages