Images in About Section doesn't show after connecting to Sanity.

[samwpr]

Hi everyone, could I please ask for assistance with the following issue?

I am at this section of the youtube tutorial.

Everything was working perfectly, but once I connected to Sanity, this website section doesn't show.

I have tried the following but nothing seems to work:

1. Checking that in my client.js I use 'projectId' and not 'projectID'
2. Instead of using 'process.env.REACT_APP_SANITY_PROJECT_ID' use the actual project ID. When I use 'process.env.REACT_APP_SANITY_PROJECT_ID' it shows a blank page. When I use the actual project ID I can see the website but the about us section is missing.

While following the tutorial the only thing I did that differed from the video was at 1:48:20 of the video where after he created the .env file he reloaded the application via ctrl c I am on a mac so in my terminal I used man kill instead.

Please find my code below:
.env

client.js

About.jsx

[M-TorresDeveloper]

same here... seems like many things aren't working well like google cloud integration as well...

[Teegreat]

I also have the same problem

[bond0887]

using async await instead of .then worked for me.

const fetchAbouts = async () => {
const query = '*[_type == "abouts"]';
setAbouts(await client.fetch(query));
}

useEffect(() => {
fetchAbouts();
}, []);

This code worked for me but I don't know the logic behind this, if anyone can explain it would be great. TIA

[Teegreat]

Didn't work for me. Let me see your full code pls

[Teegreat]

using async await instead of .then worked for me.

const fetchAbouts = async () => { const query = '*[_type == "abouts"]'; setAbouts(await client.fetch(query)); }

useEffect(() => { fetchAbouts(); }, []);

This code worked for me but I don't know the logic behind this, if anyone can explain it would be great. TIA

Full code pls

[bond0887]

using async await instead of .then worked for me.
const fetchAbouts = async () => { const query = '*[_type == "abouts"]'; setAbouts(await client.fetch(query)); }
useEffect(() => { fetchAbouts(); }, []);
This code worked for me but I don't know the logic behind this, if anyone can explain it would be great. TIA

Full code pls

https://github.com/bond0887/portfolio-frontend

[Teegreat]

using async await instead of .then worked for me.
const fetchAbouts = async () => { const query = '*[_type == "abouts"]'; setAbouts(await client.fetch(query)); }
useEffect(() => { fetchAbouts(); }, []);
This code worked for me but I don't know the logic behind this, if anyone can explain it would be great. TIA

Full code pls

https://github.com/bond0887/portfolio-frontend

Thanks but still stuck

[Teegreat]

Finally found the solution.

Go to Sanity Manage Project
=> Add CORS ORIGIN
=> Paste this: http://localhost:*
=> Select "allow credentials"
=> Save and you are good to go

[justmarvee102]

Finally found the solution.

Go to Sanity Manage Project => Add CORS ORIGIN => Paste this: http://localhost:* => Select "allow credentials" => Save and you are good to go

Did this work for anyone?