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 Sanity.io

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
https://www.sanity.io/docs/js-client but I’m wondering if I need to install
@sanity/client
on my Gatsby frontend or if I can just use
gatsby-source-sanity
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
😄Thanks
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: https://www.learnwithjason.dev/store-user-generated-content-in-sanity/
Short answer: yes, you'll need to install
@sanity/client
in this case 🙂 Here's some example code from the episode above, that you can probably base your solution on: https://github.com/learnwithjason/sanity-user-content-frontend/blob/main/functions/vote-for-name.js .
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
gatsby-config
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!');
      console.log(updatedRating);
    })
    .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?