Skip to content

Instantly share code, notes, and snippets.

@runeb
Last active April 22, 2021 00:32
Show Gist options
  • Save runeb/fdef67225a292fb02b04a8ec756b8a41 to your computer and use it in GitHub Desktop.
Save runeb/fdef67225a292fb02b04a8ec756b8a41 to your computer and use it in GitHub Desktop.
Example of custom document actions on Sanity. See documentation for more https://www.sanity.io/docs/document-actions-api
import defaultResolve from "part:@sanity/base/document-actions";
import Custom from "./Custom";
// All actions are just functions that receive props (current document
// information) and return an object with at least a label and an onHandle
// function that is invoked if the editor wants to perform the action. See
// documentation for more possibilities.
// https://www.sanity.io/docs/document-actions-api
function MinimalCustomActionExample(props) {
return {
label: "Click me",
onHandle: () => {
alert("Editor performed action")
}
}
}
// This is how Sanity determines which document actions to display to an Editor.
// It calls this function, and whatever actions are returned are presented.
export default function resolveDocumentActions(props) {
// For this example, we will return the built in document actions and our own
// custom actions appended (if we returned an empty array here, no document
// would have any available action). The first action in the list is the
// main action, and this is by default the Publish button, but you are free
// to re-arrange that here as you see fit. You can also inspect `props` to
// determine which actions you want to show, and maybe which action should be
// the default in a given case.
const builtIn = defaultResolve(props);
return [...builtIn, Custom, MinimalCustomActionExample];
}
import React from "react";
import sanityClient from "part:@sanity/base/client";
import userStore from "part:@sanity/base/user";
// A more involved custom action example, doing some queries etc.
export default function Custom(props) {
// const {draft, published, id, type} = props
// Common operation in custom actions are to inspect the document (draft ||
// published) and make decisions on if the action should be enabled or not,
// or use some of its fields for custom business logic. If you want to do
// custom mutations to the document, inspect its validation status etc,
// please have a look at the built in hooks
// https://www.sanity.io/docs/studio-react-hooks
// Perhaps use another sanity API client to query a different dataset
const dynamicSanityClient = sanityClient.withConfig({
apiVersion: "2021-04-15",
dataset: "sync",
});
return {
disabled: false,
label: "Custom",
// This function is what happends when editors perform your action by clicking the button
onHandle: async () => {
// You may do whatever you want in here
return Promise.all([
dynamicSanityClient.fetch("count(*)"),
// Get some info about the current user
userStore.getUser("me"),
]).then(([count, user]) => {
alert(
`Hello ${user.displayName}! There are ${count} documents in the other dataset`
);
})
}
};
}
"parts": [
...,
{
"implements": "part:@sanity/base/document-actions/resolver",
"path": "actions.js"
},
...,
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment