Issue with updating the backend sanity About section in a YouTube tutorial.

31 replies
Last updated: Apr 23, 2022
HI, I'm in the middle of a really good YouTube tutorial https://youtu.be/3HNyXCPDQ7Q?t=6792 , but I'm having some issue when updating my backend sanity About section. I have followed up to this point 3 times to ensure the code is correct but I must be making a mistake somewhere. I check the sanity manage page and I can see there are api calls but it doesn't seem to be the updated about section. Any help on this would be appreciated.
Apr 23, 2022, 10:18 AM
user C

Can you share some code?
Apr 23, 2022, 10:32 AM
Sure.
Apr 23, 2022, 10:35 AM
I'll show you the about page 1st
Apr 23, 2022, 10:35 AM
import React, { useState, useEffect } from 'react'import { motion } from 'framer-motion'

import { images } from '../../constants'
import './About.scss';
import { urlFor, client } from '../../client';

const About = () => {
const [abouts, setAbouts] = useState([]);

useEffect(() => {
const query = '*[_type == "abouts"]';

client.fetch(query)
.then((data) => setAbouts(data))
}, []);

return (
<>
<h2 className="head-text">I know that <span>Good Dev</span><br /> means <span>Good Business</span>
</h2>

<div className="app__profiles">
{abouts.map((about, index) => (
<motion.div
whileInView={{ opacity: 1 }}
whileHover={{ scale: 1.1 }}
transition={{ duration: 0.5, type: 'tween' }}
className="app__profile-item"
key={about.title + index}
>
<img src={urlFor(about.imgUrl)} alt={about.title} />
<h2 className="bold-text" style={{ marginTop: 20 }}>{about.title}</h2>
<p className="p-text" style={{ marginTop: 10 }}>{about.description}</p>
</motion.div>
))}
</div>
</>
)
}
Apr 23, 2022, 10:35 AM
Do you have the code on Github?
It would be easier to reproduce and help.
Apr 23, 2022, 10:38 AM
yes. I'll just commit it and send you a link.
Apr 23, 2022, 10:42 AM
πŸ‘
Apr 23, 2022, 10:42 AM
I'm running it on an Ubuntu 20.04.4 LTS
Apr 23, 2022, 10:55 AM
Virtual Machine
Apr 23, 2022, 10:56 AM
Is your Sanity dataset public or private?
Apr 23, 2022, 10:59 AM
Do I check that in the sanity manage screen
Apr 23, 2022, 11:01 AM
?
Apr 23, 2022, 11:01 AM
yeah it is
Apr 23, 2022, 11:02 AM
Yes
Apr 23, 2022, 11:03 AM
Under "Datasets"
Apr 23, 2022, 11:03 AM
OK, I got it running, can you elaborate on what the issue is?
Apr 23, 2022, 11:04 AM
The about page should allow me to update the site from the sanity back end
Apr 23, 2022, 11:06 AM
Like in this picture here
Apr 23, 2022, 11:06 AM
I am getting a CORS error, can you add http://localhost:3000 to allowed hosts or check if it is added?
Apr 23, 2022, 11:07 AM
Here is where I update it on the backend.
Apr 23, 2022, 11:10 AM
So if I understand correctly, the issue is that the frontend won't load the data from "Abouts"?
Apr 23, 2022, 11:12 AM
yes. apologies for the poor description I'm still getting to grips with this.
Apr 23, 2022, 11:13 AM
OK, give me a few minutes, I'll check it out.
Apr 23, 2022, 11:15 AM
Thank you.
Apr 23, 2022, 11:15 AM
import sanityClient from '@sanity/client';
import imageUrlBuilder from '@sanity/image-url';
// import '@sanity/client';

// const sanityClient = require('@sanity/client')
export const client = sanityClient({
    projectId: process.env.REACT_APP_SANITY_PROJECT_ID,   // <- Update this 
    dataset: 'production',
    apiVersion: '2022-02-01',
    useCdn: true,
    token: process.env.REACT_APP_SANITY_TOKEN,
});

const builder = imageUrlBuilder(client);
export const urlFor = (source) => builder.image(source)
Apr 23, 2022, 11:17 AM
You didn't set the projectId correctly in client.js
Apr 23, 2022, 11:18 AM
omg...I could pull my hair out....Thank you so much
Apr 23, 2022, 11:20 AM
We have success.
Apr 23, 2022, 11:21 AM
No problem, let me/others know if you need more help
Apr 23, 2022, 11:21 AM
Thanks again. πŸ™
Apr 23, 2022, 11:22 AM

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?