@sanity/vision

What is @sanity/vision?

@sanity/vision is a tool for querying your Sanity content using GROQ (Graph-Relational Object Queries). It provides a powerful and flexible way to interact with your Sanity dataset directly from the Sanity Studio.

What are @sanity/vision's main functionalities?

Querying Data

This feature allows you to query your Sanity dataset using GROQ. The example code fetches all documents of type 'post' from the dataset.

const query = '*[_type == "post"]';
const params = {};
client.fetch(query, params).then(posts => {
  console.log(posts);
});

Parameterized Queries

This feature allows you to use parameters in your queries to filter data dynamically. The example code fetches all posts authored by 'John Doe'.

const query = '*[_type == "post" && author == $author]';
const params = { author: 'John Doe' };
client.fetch(query, params).then(posts => {
  console.log(posts);
});

Projection

This feature allows you to specify which fields to include in the returned documents. The example code fetches only the 'title' and 'author' fields of all 'post' documents.

const query = '*[_type == "post"]{title, author}';
const params = {};
client.fetch(query, params).then(posts => {
  console.log(posts);
});

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.

README

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.