I want to fetch data in server component and pass it down to client component (next13 app router)

[north wren]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[eager hound]

@indigo granite

[indigo granite]

where exactly do you have errors? What's missing? ..

[eager hound]

im not getting the data in frontend

getting undefined in terminal when i
console.log(product)

this is what im getting

this is what i want

[indigo granite]

what does the console.log log? `` async function getData() {
const res = await fetch("http://localhost:5000/api/products");
console.log(res)
return res.json();
}

[eager hound]

no i dont get anything when i console.log(res)

but the api is working

[indigo granite]

- const res = await fetch("http://localhost:5000/api/products");
+ const res = await fetch("/api/products");

try it like this

[eager hound]

no it doesnt work

[indigo granite]

the res must give you a response. Even when it's an error, there is a response. What's the log of the res?

[eager hound]

im not getting any response from res

[indigo granite]

oh, I see... you are not calling it xD

[eager hound]

i checked the network tab and the server terminal i dont see any log

[indigo granite]

nvm, found it

[eager hound]

?? xd

like this ? xD

[indigo granite]

haha xD

but also with await before the getData();

and the hi before the other console.log

and maybe one at the start of getData(); to see if it getting called

btw your res.json() also need an await

[eager hound]

this xd?

[indigo granite]

haha nearly... let me modify it. Could you send it here in the chat (without screenshot)?

[eager hound]

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);
})();

[indigo granite]

with the `
you can easily share code if you need it in the future

two of this: `

doing this

And three of this: `

doing this

[eager hound]

i tried that but the code is too long

[indigo granite]

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>;
}

[eager hound]

haha i know that bro

[indigo granite]

haha sure... I see xD

[eager hound]

where should i expect log ? here right

[indigo granite]

hmm.. yea, normally in the terminal where you started your server with pnpm/npm/yarn dev

[eager hound]

i cant see any log ;-;

[indigo granite]

wanna hop in a little call?

[eager hound]

yeah

[indigo granite]

@eager hound please mark a message as solution or close the thread

[indigo granite]

@eager hound

[eager hound]

oh sorry

[indigo granite]

please mark a message as solution or close the thread