@snorreeb/sanity-plugin-graph-view NPM

NOTE
This is the Sanity Studio v3 version of sanity-plugin-graph-view.
For the v2 version, please refer to the v2-branch.

Wonder how a visualization of your dataset will look? How many authors do you have? How many items have they worked on? And are currently working on! Edits and changes are shown in real-time!

Explore your data with this plugin, seek out strange corners and data types, boldly go where you could not before!

Installation

npm install --save sanity-plugin-graph-view@studio-v3

yarn add sanity-plugin-graph-view@studio-v3

Usage

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

import { contentGraphView } from "sanity-plugin-graph-view";

export default createConfig({
  // ...
  plugins: [
    contentGraphView({}),
  ] 
})

This will add a /graph-your-content tools to the Sanity Studio, configured with this default query:

  *[
    !(_id in path("_.*")) &&
    !(_type match "system.*") &&
    !(_type match "sanity.*")
  ]

Configuration

You can control which documents appear in the graph by providing a query:

import { contentGraphView } from "sanity-plugin-graph-view";

export default createConfig({
  // ...
  plugins: [
    contentGraphView({
      "query": "*[_type in ['a', 'b']]"
    }),
  ] 
})

For references to turn into graph edges, the entire document must be fetched, but you can also selectively filter what references will be included. For example:

contentGraphView({
  "query": "*[_type in ['a', 'b']]{ 'refs': [author, publisher] }"
})

By default, the plugin uses doc.title || doc.name || doc._id as the node label.

If you want to use another property, compute a title property in your query, e.g.:

contentGraphView({
  "query": "*[_type in ['a', 'b']] { ..., \"title\": select(_type == 'a' => 'Title A', _type == 'b' => 'Title B') }"
})

Get help in the Sanity Community

Join Sanity’s developer community or ping us on twitter.

License

MIT © Sanity.io

Develop & test

Make sure to run npm run build once, then run

npm run link-watch

In another shell, cd to your test studio and run:

npx yalc add @sanity/sanity-plugin-graph-view && yarn install

Now, changes in this repo will be automatically built and pushed to the studio, triggering hotreload. Yalc avoids issues with react-hooks that are typical when using yarn/npm link.