Issue with custom action not resetting variables when switching microsites

2 replies
Last updated: Sep 30, 2022
I have a custom action built. It is a Publish button that is attached to the corresponding Netlify build hook. We have several microsites within our Sanity studio, and each microsite has its own Publish button that kicks off a deploy. In my action code I get the microsite id that then sets the necessary variables for the site deploy. However, when I bounce around to different microsites to test the publish button, it isn't resetting the variables to jive with the new microsite id.
A condensed version of my code:

import React, {useState} from "react";
import {RocketIcon} from '@sanity/icons'
let siteName;
let hookId;
let baseHookUrl = "<>";
let postUrl;

export function PublishMicrositeAction(props) {
    let micrositeId =;

    if (micrositeId == "abc") {
        siteName = "Publishing Root Site";
        hookId = "123abc";
        postUrl = `${baseHookUrl}${hookId}`;
    if (micrositeId == "def") {
        siteName = "Publishing Essentials";
        hookId = "456def";
        postUrl = `${baseHookUrl}${hookId}`;
    if (micrositeId == "ghi") {
        siteName = "Publishing Foundations";
        hookId = "789ghi";
        postUrl = `${baseHookUrl}${hookId}`;

    const [isDialogOpen, setIsDialogOpen] = useState(false)

    if (props.type !== 'microsite') {
        return null

    function formSubmit() {
        var request = new XMLHttpRequest();'POST', postUrl, true);
        request.onload = function() { // request successful
        // we can use server response to our request now
        request.onerror = function() {
          // request failed
        request.send(new FormData(; // create FormData from form that triggered event

    return {
      label: "Publish Microsite",
      icon: RocketIcon,
      onHandle: () =&gt; setIsDialogOpen(true),    
      dialog: isDialogOpen &amp;&amp; {
          type: 'modal',
          onClose:  () =&gt; setIsDialogOpen(false),
          content: &lt;div id="modal"  style={{paddingBottom: 30 + 'px'}}&gt;
          &lt;p&gt;Please enter a brief description of what was changed.&lt;/p&gt;
          &lt;form id="publishForm" onSubmit={formSubmit}&gt;
          &lt;label for="trigger_title"&gt;Message: &lt;/label&gt;
          &lt;input type="text" id="trigger_title" name="trigger_title"/&gt;
          &lt;button id="submitBtn" type="submit" style={{marginLeft: 10 + 'px'}}&gt;Publish&lt;/button&gt;
Maybe I have stared at this too long to see my mistake or what I am missing. But I really need the micrositeId to be updated every time I switch to a new microsite. I can see when I console.log the that it displays the correct id, but the variables do not reflect that.
Sep 29, 2022, 6:45 PM
I wonder if you're having some component remounting/rerendering sorcery interfering? Have you tried holding the variables in state?
Sep 29, 2022, 7:17 PM
FYI - I ended up changing the code to use a switch statement instead of an if statement. It is doing the job I had originally intended. Phew!
Sep 30, 2022, 3:17 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?