See Sanity in action 👀 Join us for a live product demo + Q&A →

How to call a 3rd party API and update fields on a form using Sanity document actions or a custom input component.

2 replies
Last updated: Feb 22, 2023
anyone have a code example or if it's possible, on a page, you click a button and call a 3rd party API and update fields on that form and then disable them, using for reference only.
Feb 22, 2023, 4:26 PM
Feb 22, 2023, 4:26 PM
It’s possible with document actions or a custom input component. I haven’t migrated this to V3, but here’s a V2 component you can use to get started.
      name: 'fetchObject',
        'A component that will fetch data from the specified URL and write something to the field below',
      title: 'Fetch Stuff with This Object',
      type: 'object',
      fields: [
          name: 'url',
          title: 'Url to Fetch',
          type: 'url',
          inputComponent: UrlWithButton,
          name: 'fieldToWrite',
          title: 'Field to Write',
          type: 'string',

import React from 'react';
import { Card, TextInput, Button } from '@sanity/ui';
import { FormField } from '@sanity/base/components';
import PatchEvent, { set, unset } from '@sanity/form-builder/PatchEvent';
import { useId } from '@reach/auto-id';
import { withDocument } from 'part:@sanity/form-builder';
import { studioClient } from '../../lib/utils/studioClient';

const UrlWithButton = React.forwardRef((props, ref) => {
  const {
    type, // Schema information
    value, // Current field value
    readOnly, // Boolean if field is not editable
    markers, // Markers including validation rules
    presence, // Presence information for collaborative avatars
    compareValue, // Value to check for "edited" functionality
    onFocus, // Method to handle focus state
    onBlur, // Method to handle blur state
    onChange, // Method to handle patch events,
  } = props;

  // Creates a change handler for patching data
  const handleChange = React.useCallback(
    // useCallback will help with performance
    event => {
      const inputValue = event.currentTarget.value; // get current value
      // if the value exists, set the data, if not, unset the data
      onChange(PatchEvent.from(inputValue ? set(inputValue) : unset()));

  //Fetches the URL specfied then uses the JS client to write to the current document
  const handleClick = async () => {
    const res = await fetch(value).then(res => res.json());
        fetchObject: {

  const inputId = useId();

  return (
      description={type.description} // Creates description from schema
      title={type.title} // Creates label from schema title
      __unstable_markers={markers} // Handles all markers including validation
      __unstable_presence={presence} // Handles presence avatars
      compareValue={compareValue} // Handles "edited" status
      inputId={inputId} // Allows the label to connect to the input field
      <Card padding={2}>
          id={inputId} // A unique ID for this input
          space={[3, 3, 4]}
          value={value} // Current field value
          readOnly={readOnly} // If "readOnly" is defined make this field read only
          onFocus={onFocus} // Handles focus events
          onBlur={onBlur} // Handles blur events
          onChange={handleChange} // A function to call when the input value changes
      <Card padding={2}>

export default withDocument(UrlWithButton);
Feb 22, 2023, 7:23 PM – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.