sanity-plugin-graphiql

sanity-plugin-graphiql

This is a Sanity Studio v3 plugin.

Add GraphiQL to your Sanity Studio.

Installation

npm install sanity-plugin-graphiql

pnpm install sanity-plugin-graphiql

yarn add sanity-plugin-graphiql

Usage

Add it as a plugin in sanity.config.ts (or .js):

import {defineConfig} from 'sanity'
import {graphiQLTool} from 'sanity-plugin-graphiql'

export default defineConfig({
  //...
  plugins: [
    graphiQLTool({
      apiVersion: '2021-10-21',

      // if you want to use a GraphQL api that is
      // not a Sanity GraphQL API, you can hardcode the url.
      url: 'https://www.example.com/api/my/graphql',

      // override the default tool name
      name: 'graphiql',

      // override the default tool title
      title: 'GraphiQL',

      // override the default tool icon
      icon: BlockElementIcon,
    }),
  ],
})

Options

The following options are required to set up the tool:

• apiVersion required: the version of the sanity API used for fetching GraphQL metadata
• url: set a custom GraphQL api. This removes the ability to select the url from the tool.
• name: set a custom name for the tool. (default: graphiql)
• title: set a custom name for the tool. (default: GraphiQL)
• icon: set a custom name for the tool. (default: "@sanity/icons".BlockElementIcon)

License

MIT © Romeo Van Snick

Develop & test

This plugin uses @sanity/plugin-kit with default configuration for build & watch scripts.

See Testing a plugin in Sanity Studio on how to run this plugin with hotreload in the studio.

Release new version

Run "CI & Release" workflow. Make sure to select the main branch and check "Release new version".

Semantic release will only release on configured branches, so it is safe to run release on any branch.

Screenshots

Dark mode

Light mode