@sanity/vision

sanity-vision

Vision is a plugin for Sanity Studio for testing GROQ queries. It features:

• GROQ syntax highlighting so that the query is easier to read
• Parsed response that's more convenient to navigate and explore
• Switching between datasets
• Listening for real-time updates

Installation

npm install --save-exact @sanity/vision

Configuring

// `sanity.config.ts` / `sanity.config.js`:
import {defineConfig} from 'sanity'
import {visionTool} from '@sanity/vision'

export default defineConfig({
  // ...
  plugins: [
    visionTool({
      // Note: These are both optional
      defaultApiVersion: 'v2021-10-21',
      defaultDataset: 'some-dataset',
    }),
  ],
})

Only enabling it for development

If you only want the Vision tool available in development (e.g., not in deployed studios), you can import and use the isDev constant from the sanity package:

// `sanity.config.ts` / `sanity.config.js`:
import {defineConfig, isDev} from 'sanity'
import {visionTool} from '@sanity/vision'

const devOnlyPlugins = [visionTool()]

export default defineConfig({
  // ...
  plugins: [
    // ... your other plugins here ...
    ...(isDev ? devOnlyPlugins : []),
  ],
})

Only enabling it for administrators

If you only want the Vision tool available to administrators, you can use the Tool API to filter out the tool based on role:

// `sanity.config.ts` / `sanity.config.js`:
import {defineConfig} from 'sanity'
import {visionTool} from '@sanity/vision'

export default defineConfig({
  // ... name, title, projectId, dataset, etc.
  plugins: [
    // ... your other plugins here ...
    visionTool(),
  ],
  tools: (prev, {currentUser}) => {
    const isAdmin = currentUser?.roles.some((role) => role.name === 'administrator')

    // If the user has the administrator role, return all tools.
    // If the user does not have the administrator role, filter out the vision tool.
    return isAdmin ? prev : prev.filter((tool) => tool.name !== 'vision')
  },
})

License

MIT-licensed. See LICENSE.

Similar packages

Other packages similar to @sanity/vision

graphql

GraphQL is a query language for APIs and a runtime for executing those queries by using a type system you define for your data. It provides a more flexible and efficient alternative to REST. Unlike @sanity/vision, which uses GROQ, GraphQL uses its own query language.

apollo-client

Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. It provides a powerful way to interact with GraphQL APIs, similar to how @sanity/vision interacts with Sanity datasets using GROQ.

prisma

Prisma is an open-source database toolkit that makes it easy to work with databases in Node.js and TypeScript. It provides a type-safe database client and a powerful query engine. While @sanity/vision is specific to Sanity, Prisma can be used with various databases.