🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

Help needed with updating likesCount in a dataset using Sanity.io and Next.js

7 replies
Last updated: Feb 6, 2023
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

seller:{…} 2 properties
title:Accompaniment for a TV show marathon
Now I have a button in my react component,

<button onClick={addToLikes}>Likes: {selectedService?.likes}</button>
My addToLikes function is as follows:

const addToLikes = async (selectedService) => {
  console.log("addToLikes triggered");
  try {
    const data = { id: selectedService.id };
    const result = await axios.patch("/api/updateLikes", data);
  } catch (error) {
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:

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) {
    response.status(500).json({ message: "Server error" });
What am I doing wrong here?
Feb 6, 2023, 2:13 AM
user T
do you think you could help me out with this a little?
Feb 6, 2023, 2:38 PM
Hey User, I’d probably start with using Sanity Client to perform the patch, it should greatly simplify your code!

Feb 6, 2023, 3:07 PM
Thank you , let me look into this.
Feb 6, 2023, 3:25 PM
does this work well with nextjs projects as well?
Feb 6, 2023, 3:26 PM
Sure does!
Feb 6, 2023, 3:30 PM
Perhaps take a look at next-sanity also to register your client globally in your app
Feb 6, 2023, 3:30 PM
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.

Was this answer helpful?