Help needed with updating likesCount in a dataset using Sanity.io and Next.js
7 replies
Last updated: Feb 6, 2023
R
Hi guys, I am a newbie to the headless CMS world navigating through sanity.io . I need help updating the likesCount in my dataset when user clicks on the like button.
I was able to use sanity to manually import some data into my sanity dataset and fetch it from an endpoint that I created in my nextjs App. now I need your help to mutate a number property.
this is a sample of one of my documents
Now I have a button in my react component,
My addToLikes function is as follows:
I want to make the addLikes function change the value of my dataSet in sanity. so when the user click the button, it should increase the likes by 1. But I am having issues with this. This is how I have my API endpoint set up for mutation, but it is giving me server error
/pages/api/updateLikes.js file below:
What am I doing wrong here?
I was able to use sanity to manually import some data into my sanity dataset and fetch it from an endpoint that I created in my nextjs App. now I need your help to mutate a number property.
this is a sample of one of my documents
likes:120 price:50 rating:4.5 seller:{ā¦} 2 properties _ref:3a45f32e-e6b3-4eef-984a-515a595b25ad _type:reference serviceImageUrl:<https://cdn.discordapp.com/attachments/990816819654852648/1063634376849629194/needmadnes33_two_people_sitting_on_the_couch_and_watching_tv_tv_1ff1b756-feb1-410a-97a3-97055562b522.png> title:Accompaniment for a TV show marathon visits:180
<button onClick={addToLikes}>Likes: {selectedService?.likes}</button>
const addToLikes = async (selectedService) => { console.log("addToLikes triggered"); try { const data = { id: selectedService.id }; const result = await axios.patch("/api/updateLikes", data); console.log(result.data); } catch (error) { console.error(error); } };
/pages/api/updateLikes.js file below:
import axios from "axios"; export default async function handler(request, response) { try { const data = JSON.parse(request.body); const mutations = { mutations: [ { patch: { _id: data.id, inc: { likes: 1 }, }, }, ], }; const apiEndpoint = `https://${process.env.NEXT_PUBLIC_SANITY_PROJECT_ID}.<http://api.sanity.io/v2023-02-05/data/mutate/${process.env.NEXT_PUBLIC_SANITY_DATASET}`;|api.sanity.io/v2023-02-05/data/mutate/${process.env.NEXT_PUBLIC_SANITY_DATASET}`;> const result = await axios.patch(apiEndpoint, mutations, { headers: { "content-type": "application/json;charset=utf-8", Authorization: `Bearer ${process.env.SANITY_API_TOKEN}`, }, method: "PATCH", }); await result.data; response.status(200).json({ message: "likes increased" }); } catch (error) { console.error(error); response.status(500).json({ message: "Server error" }); } }
Feb 6, 2023, 2:13 AM
R
user T
do you think you could help me out with this a little?Feb 6, 2023, 2:38 PM
S
Hey User, Iād probably start with using Sanity Client to perform the patch, it should greatly simplify your code!
https://github.com/sanity-io/client#patchupdate-a-document
https://github.com/sanity-io/client#patchupdate-a-document
Feb 6, 2023, 3:07 PM
R
Thank you , let me look into this.
Feb 6, 2023, 3:25 PM
R
does this work well with nextjs projects as well?
Feb 6, 2023, 3:26 PM
S
Sure does!
Feb 6, 2023, 3:30 PM
S
Perhaps take a look at next-sanity also to register your client globally in your app
https://github.com/sanity-io/next-sanity
https://github.com/sanity-io/next-sanity
Feb 6, 2023, 3:30 PM
S
And please make sure to use gender neutral language in the community š
Feb 6, 2023, 8:10 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.