Client component fetch barber
Answered
Ojos Azules posted this in #help-forum
Ojos AzulesOP
I am trying in my client component to fetch my barber from my dashboard but i get this:
The part from my client component that i fetch barber:
Promise { <state>: "pending" }
<state>: "fulfilled"
<value>: undefined
<prototype>: Promise.prototype { … }
time-form.tsx:53:10The part from my client component that i fetch barber:
const getBarber = async () => {
if (barberId) {
try {
const barber = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/workingHours/${barberId}`
);
return barber.json();
} catch (error) {
console.log(error);
}
}
};
console.log(getBarber());Answered by averydelusionalperson
I would recommend fetching data in server component instead of client component
17 Replies
you need to await
const barber = await getBarber()oh, you're fetching in client component
I would recommend doing it in server component
and passing it to client component
Ojos AzulesOP
const getBarber = async (id: string) => {
if (barberId) {
try {
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/workingHours/${id}`
);
const json = await response.json();
return json;
} catch (error) {
console.log(error);
}
}
};
if (barberId) {
const barber = getBarber(barberId)
.then((data) => {
data;
})
.catch((err) => {
console.log(err);
});
return barber;
}I made this actually
and it works
also i allowed cors in my route.ts
okay then
Ojos AzulesOP
but i dont know if its good solution
I would recommend fetching data in server component instead of client component
Answer
Ojos AzulesOP
Yeah its better i think
thanks