Sanity-plugin-computed-field NPM

sanity-plugin-computed-field

This is a Sanity Studio v3 plugin.

This plugin computes a field's value based on other fields or relationships with its document or based on external data. In other words, this field memoizes a value in a document using GROQ to lookup and custom javascript to compute the value from those GROQ results. See this post for more info on the plugin.

Installation

For Sanity v2

Use sanity-plugin-computed-field version v1.*. See v1 docs for configuration of v1 computed field.

sanity install sanity-plugin-computed-field@^1.0.2

For Sanity v3

Use sanity-plugin-computed-field version 2 or above

sanity install sanity-plugin-computed-field@^2.0.0

Initialize plugin

In your sanity.config.ts

import {sanityComputedField} from 'sanity-plugin-computed-field'

export default defineConfig({
  name: '...',
  title: '...',

  projectId: '...',
  dataset: 'production',

  plugins: [
    deskTool(),
    visionTool(),

    // Add this line
    sanityComputedField()
  ],

  schema: {
    types: schemaTypes,
  },
})

Configure

Now you may use the computedNumber, computedText, computedString and computedBoolean types. These are just number, text, string, and boolean values under the hood respectively, but you have have them computed automatically via documentQuerySelection and reduceQueryResult.

documentQuerySelection is a groq query with respect to the current document being viewed in Sanity Studio.

  defineField({
    name: '...', //Give your sanity field a name, title, description
    title: '...',
    description: '...',
    type: 'computedNumber',
    readOnly: true or false // set to true to disable setting this value manually
    options: {
      buttonText: 'Refresh',
      documentQuerySelection: `
      "numberOfReferences": count(*[references(^._id)])
      `,
      reduceQueryResult: (result: {
        draft?: {numberOfReferences: number}
        published: {numberOfReferences: number}
      }) => {
        // When 'Refresh' button is pressed, this value will be set to result.published.numberOfReferences, from the documentQuerySelection above.
        return result.published.numberOfReferences
      },
    },
  }),

`options.documentQuerySelection` (required)

Defines the body of the query on the current document being edited. The result is fed into reduceQueryResult, containing both the draft and published versions of the document. draft may be undefined if no draft exists. This selection is made every time "Regenerate" is clicked.

`options.reduceQueryResult` (required)

Returns the value to populate computed field, based on the query result of 'documentQuerySelection'. This function is called every time "Regenerate" is clicked and the GROQ query successfully is made. This function can also return a promise or be async if any asynchronous code needs to be run to compute the result.

`options.buttonText` (default `"Regenerate"`)

What text should be in button user clicks to recompute the value.

A Comprehensive Example

See docs/v2/movies for full example.

This uses the movies sanity template for a new project (from sanity init), but adds some computed fields to synthesize if/when the next movie screenings are taking place.