Register now - Learn how Tecovas roped in success with Sanity and Shopify 🤠

How to update a field in a document from the Gatsby frontend using

8 replies
Last updated: Feb 12, 2021
Hello, question from a newbie : I’d like to update a field (“rating”) in my document from the Gatsby frontend (with a button that increments the rating field) :
export default {
  name: 'problem',
  type: 'document',
  title: 'Problems',
  fields: [
      name: 'title',
      title: 'Title',
      type: 'string',
      validation: (Rule) => Rule.required(),
      name: 'rating',
      title: 'Number of votes',
      type: 'number',
      validation: (Rule) =>
        Rule.required().integer().positive().error('Must be a positive integer!'),
I saw the paragraph “Patch/update a document” in but I’m wondering if I need to install
on my Gatsby frontend or if I can just use
to do that ? or maybe it has nothing to do with it ?If you have examples of something like this, that would be so great
Feb 8, 2021, 3:51 PM
Hi User, here's an episode of Learn with User (featuring our very own User!) that I believe is similar to your use case: storing user-generated content in Sanity. Although the example uses Next.js, the same applies to Gatsby:
Short answer: yes, you'll need to install
in this case 🙂 Here's some example code from the episode above, that you can probably base your solution on: .
It doesn't deal with validation or people casting multiple votes (in your case posting multiple ratings), so that might be something to add.
Feb 8, 2021, 4:05 PM
Hi User, thanks a lot to get me in the right direction !it’s exactly what I need (in my case, the user needs to vote just once)
Feb 8, 2021, 4:07 PM
Glad to hear, although I probably wasn't fully clear there. It currently allows multiple votes, but you probably want to limit that somehow 🙂
Feb 8, 2021, 4:08 PM
yes, probably with cookies 🙂
Feb 8, 2021, 4:09 PM
So for now, I end up with this code that works. But, if locally my rating is updated instantly, I have to wait the Netlify build is finished when online for the rating to be updated when I reload the page.I set the useCdn to false (and in the
too), but that doesn’t change anything.Maybe I miss something here ? Is there a better strategy ?

const sanityClient = require('@sanity/client');

const client = sanityClient({
  projectId: process.env.GATSBY_SANITY_PROJECT_ID,
  dataset: 'production',
  token: process.env.SANITY_TOKEN_WRITE,
  useCdn: false,

exports.handler = async function (event, context) {
  const body = JSON.parse(event.body);
  const { id } = body;

  const result = await client
    .patch(id) // Document ID to patch
    .inc({ rating: 1 }) // Increment field by count
    .commit() // Perform the patch and return a promise
    .then((updatedRating) => {
      console.log('Merci pour le vote!');
    .catch((err) => {
      console.error('Désolé, il y a eu un souci : ', err.message);

  return {
    statusCode: 200,
    body: JSON.stringify({
      message: `Merci pour votre vote !`,
Feb 10, 2021, 5:04 PM
I’m gonna watch the end of the video to see how they handle that :)
Feb 10, 2021, 5:48 PM
As far as I can understand, the video doesn’t discuss this topic.
Feb 11, 2021, 6:39 AM
Finally, I went to Firebase for this part because I needed real time data and didn’t want to trigger a build each time a user was voting. But it’s cool to know I can mutate data in Sanity from the frontend 🙂
Feb 12, 2021, 7:15 PM

Sanity– build remarkable experiences at scale

Sanity is a modern 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?