const fetchAddresses = async () => {
try {
const response = await fetch('http://localhost:1337/api/adresses');
if (response.ok) {
const data = await response.json();
console.log('bye');
setAddresses(data);
} else {
console.log('ok');
throw new Error('Error fetching addresses');
}
} catch (error) {
console.error('Error fetching addresses:', error);
console.log('hi');
}
};

put a log on all cases

not getting anything

maybe fix that error first

can i see the full code

sure

like a link to github?

or screenshots

im too lazy so just code block

DEFINETLY NOT SCREENSHOT

lmao

dk if u need more

no

just the place where where you used fetchAddress....

.

the error isnt gonna fix the things anyways

none of the 'bye' 'ok' or 'hi' is displayed?

nope

try removing this part

and check if theres any console logs

still no logs

are you using the pages dir?

for the components no

ah

sorry i dont have enough experience with pages routing

tx for ur time anw 🫶🏼

ok i know

your problem

When you call a request or something like that.., it pass it to the next backend

that means you've to handle it

hmm

in your api folder

create a file adresses

and then..

fill it using this template..

(wait i've to write it..

export default function handler(req, res) {
res.status(200).json({ name: 'John Doe' })
}

yes

put console.log inside it too if need

where do i get the json from

depends the data

{
"data": [
{
"id": 1,
"attributes": {
"address": "Random Address 1",
"phone": "+1 123-456-7890",
"details": "Random Details 1",
"email": "random1@example.com",
"createdAt": "2023-06-11T08:23:12.123Z",
"updatedAt": "2023-06-11T08:45:39.739Z",
"publishedAt": "2023-06-11T08:23:47.156Z",
"locale": "en"
}
},
{
"id": 2,
"attributes": {
"address": "Random Address 2",
"phone": "+1 987-654-3210",
"details": "Random Details 2",
"email": "random2@example.com",
"createdAt": "2023-06-11T09:14:55.436Z",
"updatedAt": "2023-06-11T09:30:16.924Z",
"publishedAt": "2023-06-11T09:14:55.733Z",
"locale": "en"
}
},
{
"id": 3,
"attributes": {
"address": "Random Address 3",
"phone": "+1 555-123-4567",
"details": "Random Details 3",
"email": "random3@example.com",
"createdAt": "2023-06-11T10:46:04.079Z",
"updatedAt": "2023-06-11T10:55:19.155Z",
"publishedAt": "2023-06-11T10:46:04.933Z",
"locale": "en"
}
}
],
"meta": {
"pagination": {
"page": 1,
"pageSize": 25,
"pageCount": 1,
"total": 3
}
}
}

this is the data

but .json is a casual method on fetch .. may there's a similar one on axios

these console.log will be printed to your console, not on your navigator

apparently axios only needs .data..

like..

response.data

shoudl be enough

you could still using JSON.parse or something like this too

tbh i have no idea what ur saying lmaoo

?

im new to this

There's two sides when your creating a next app

the "front" part.. and the "back" one

client and server

yea

ye

what im writing in the components folder is client

yea

but /api/** is server

if you put in a client a request, it will be transmitted to the server..
thats means :
client : fetch(/api/adresses) (need to have a /api/adresses.js file)
server : fetch(localhost...)

as i tried to explain before

alr thank u ill look into it

I guess your problem is from there, gl tho

this is in /pages/api

you shoudlve a response now in your navigator.. 200 or 500 but a response

response.json(data)?

got to ur navigator, open devtools

and check in network tab

'

shouldn't addresses.js be in there?

it should lmao

ye im switching careers