Issue with updating the backend sanity About section in a YouTube tutorial.
31 replies
Last updated: Apr 23, 2022
M
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
I
user C
Can you share some code?
Apr 23, 2022, 10:32 AM
M
Sure.
Apr 23, 2022, 10:35 AM
M
I'll show you the about page 1st
Apr 23, 2022, 10:35 AM
M
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>
</>
)
}
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
I
Do you have the code on Github?
It would be easier to reproduce and help.
It would be easier to reproduce and help.
Apr 23, 2022, 10:38 AM
M
yes. I'll just commit it and send you a link.
Apr 23, 2022, 10:42 AM
I
👍
Apr 23, 2022, 10:42 AM
M
Apr 23, 2022, 10:54 AM
M
I'm running it on an Ubuntu 20.04.4 LTS
Apr 23, 2022, 10:55 AM
M
Virtual Machine
Apr 23, 2022, 10:56 AM
I
Is your Sanity dataset public or private?
Apr 23, 2022, 10:59 AM
M
Do I check that in the sanity manage screen
Apr 23, 2022, 11:01 AM
M
?
Apr 23, 2022, 11:01 AM
M
yeah it is
Apr 23, 2022, 11:02 AM
I
Yes
Apr 23, 2022, 11:03 AM
I
Under "Datasets"
Apr 23, 2022, 11:03 AM
I
OK, I got it running, can you elaborate on what the issue is?
Apr 23, 2022, 11:04 AM
M
The about page should allow me to update the site from the sanity back end
Apr 23, 2022, 11:06 AM
M
Like in this picture here
Apr 23, 2022, 11:06 AM
I
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
M
Here is where I update it on the backend.
Apr 23, 2022, 11:10 AM
I
So if I understand correctly, the issue is that the frontend won't load the data from "Abouts"?
Apr 23, 2022, 11:12 AM
M
yes. apologies for the poor description I'm still getting to grips with this.
Apr 23, 2022, 11:13 AM
I
OK, give me a few minutes, I'll check it out.
Apr 23, 2022, 11:15 AM
M
Thank you.
Apr 23, 2022, 11:15 AM
I
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
I
You didn't set the projectId correctly in client.js
Apr 23, 2022, 11:18 AM
M
omg...I could pull my hair out....Thank you so much
Apr 23, 2022, 11:20 AM
M
We have success.
Apr 23, 2022, 11:21 AM
I
No problem, let me/others know if you need more help
Apr 23, 2022, 11:21 AM
M
Thanks again. 🙏
Apr 23, 2022, 11:22 AM
Sanity– build remarkable experiences at scale
The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.