I want to fetch data in server component and pass it down to client component (next13 app router)
Answered
vbhv posted this in #help-forum
Original message was deleted.
41 Replies
@B33fb0n3
where exactly do you have errors? What's missing? ..
im not getting the data in frontend
getting undefined in terminal when i
console.log(product)
getting undefined in terminal when i
console.log(product)
this is what im getting
this is what i want
what does the console.log log? `` async function getData() {
const res = await fetch("http://localhost:5000/api/products");
console.log(res)
return res.json();
}
const res = await fetch("http://localhost:5000/api/products");
console.log(res)
return res.json();
}
no i dont get anything when i console.log(res)
but the api is working
- const res = await fetch("http://localhost:5000/api/products");
+ const res = await fetch("/api/products");try it like this
no it doesnt work
the
res must give you a response. Even when it's an error, there is a response. What's the log of the res?im not getting any response from res
oh, I see... you are not calling it xD
i checked the network tab and the server terminal i dont see any log
@B33fb0n3 oh, I see... you are not calling it xD
nvm, found it
like this ? xD
haha xD
but also with await before the getData();
and the
hi before the other console.logand maybe one at the start of getData(); to see if it getting called
btw your
res.json() also need an awaithaha nearly... let me modify it. Could you send it here in the chat (without screenshot)?
async function getData() {
const res = await fetch("/api/products");
// const res = await fetch("http://localhost:5000/api/products");
console.log(res)
console.log("hi")
return await res.json();
}
(async () => {
console.log('hi');
const x = await getData();
console.log('hi');
console.log(x);
})();
const res = await fetch("/api/products");
// const res = await fetch("http://localhost:5000/api/products");
console.log(res)
console.log("hi")
return await res.json();
}
(async () => {
console.log('hi');
const x = await getData();
console.log('hi');
console.log(x);
})();
with the `
you can easily share code if you need it in the future
two of this: `
And three of this: `
you can easily share code if you need it in the future
two of this: `
doing thisAnd three of this: `
doing thisi tried that but the code is too long
haha ok, let me check your code..
// servercomponent.tsx
async function getData() {
console.log("3")
const res = await fetch("/api/products");
console.log("4")
console.log("5: ",res)
return await res.json();
}
export default async function YourPage({ params }: { params: ProductParams }) {
console.log('1');
const x = await getData();
console.log('2');
console.log("6: ", x);
return <p>Hello World</p>;
}@B33fb0n3 Click to see attachment
haha i know that bro
haha sure... I see xD
hmm.. yea, normally in the terminal where you started your server with
pnpm/npm/yarn devi cant see any log ;-;
wanna hop in a little call?
yeah
@vbhv please mark a message as solution or close the thread
@vbhv
oh sorry
please mark a message as solution or close the thread
Answer