Updating powerMeter in database using Patch request in Sanity.io

Is the following code correct for Patch request, updating data in database:

const updatePowerMeter = useCallback(async (personId) => {

try {

console.log('Updating power meter...');

const data = {

id: personId,

patch: {

inc: {

powerMeter: 1,

},

},

};

await client

.patch(data.id)

.set(data.patch)

.commit();

console.log('Power meter updated successfully');

} catch (error) {

console.error(error);

}

}, []);

You could probably shorten this to:

But it's not updating the powermeter entry in database. What I could be doin wrong?

Your client may not be configured correctly. There may be a misspelling in your schema so that the

powerMeter

field doesn’t actually exist. Those would be two places to check first.

Can you share your client?

Ok let me check. Client is fine as data is getting fetched

Have you added a token?

Let me open laptop I just closed it in frustration

Yes I have added

Kindly give me 2 mins

Let me open laptop I just closed it in frustration

I have been there, my friend!

import sanityClient from '@sanity/client';

import imageUrlBuilder from '@sanity/image-url';

export const client = sanityClient({

projectId: process.env.REACT_APP_SANITY_PROJECT_ID,

dataset: 'production',

apiVersion: '2021-10-21',

useCdn: true,

token: process.env.REACT_APP_SANITY_TOKEN,

});

const builder = imageUrlBuilder(client);

export const urlFor = (source) => builder.image(source);

the client

dataset entry name is correct too

It may be that the token isn’t getting picked up from your env. Just to test it, can you try hardcoding it and running the patch?

ok let me check

No still no update

token is picked up

this token has editor permissions

The function runs when it’s supposed to, right? You get those logs in the console?

yes i get console.logs

I am updating powerMeter per visit on the page in react. But on doing refresh it isn't updating.

Would you like to see react component code?

Yes please!

ok wait

import React, { useState, useEffect, useCallback } from 'react';

import { client } from '../../../client';

import { useParams, Link } from 'react-router-dom';

import './Person.css';

export const Person = () => {

const { slug } = useParams();

const [person, setPerson] = useState(null);

const updatePowerMeter = useCallback(async (personId) => {

try {

const data = {

id: personId,

patch: {

inc: {

powerMeter: 1,

},

},

};

await client

.patch(data.id)

.set(data.patch)

.commit();

} catch (error) {

console.error(error);

}

}, []);

`const personQuery = `*[_type == "facesCelebs" && slug.current == '${slug}'][0]{name, _id, quotesbyPerson, profession, gender, ethnicity, powerMeter, slug, country, image {asset -> {url}}}`;`

useEffect(() => {

try {

client

.fetch(personQuery)

.then((data) => {

setPerson(data);

updatePowerMeter(data._id);

})

.catch((error) => console.log(error));

} catch (error) {}

}, [personQuery, updatePowerMeter]);

if (person === null) return <div><progress className="progress is-large is-info" max="100">60%</progress></div>;

const randomQuote = person.quotesbyPerson[Math.floor(Math.random() * person.quotesbyPerson.length)].quote;

return (

<>

<section className="hero is-bold heroColor">

<div className="hero-body" key={person.quotesbyPerson._key}>

<div className="container">

<div className='columns is-align-items-center is-flex-direction-column'>

<div className='column '>

<h1 className="titlePerson">{person.name}</h1>

</div>

<div className='column'>

<h2 className="subtitlePerson">"{randomQuote}" {person.powerMeter}</h2>

</div>

</div>

</div>

</div>

</section>

<div className="container">

<div className="columns">

<div className="column">

<figure>

<img className="is-rounded" src={person.image.asset.url} alt={person.name}  />

</figure>

</div>

<div>

</div>

</div>

</div>

</>

)

}

export default Person;

Hi, there?

Got it, just looking through it now.

ok

Can you try logging the

personId

to make sure the function is getting an id?

ok wait plz

Yup fetching correct id

It looks like your component still has the original patch you posted. Did you try the shortened version I shared?

let me try that

Worked

Oh good!

Let me try on live website

working great - but if any person don't have powerMeter value it shows client error in console

rest everything is fine

If you add this before the patch it should fix that. So it should look like this:

Worked - thanks a lot

You’re welcome!