How to update a field in a document from the Gatsby frontend using Sanity.io
8 replies
Last updated: Feb 12, 2021
C
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) :
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
😄Thanks
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!'), }, ], };
https://www.sanity.io/docs/js-client but I’m wondering if I need to install
@sanity/clienton my Gatsby frontend or if I can just use
gatsby-source-sanityto 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
C
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
It doesn't deal with validation or people casting multiple votes (in your case posting multiple ratings), so that might be something to add.
Short answer: yes, you'll need to install
@sanity/clientin 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
C
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
C
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
C
yes, probably with cookies 🙂
Feb 8, 2021, 4:09 PM
C
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-configtoo), 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
C
I’m gonna watch the end of the video to see how they handle that :)
Feb 10, 2021, 5:48 PM
C
As far as I can understand, the video doesn’t discuss this topic.
Feb 11, 2021, 6:39 AM
C
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.