Async Server action in client component
Answered
Sun bear posted this in #help-forum
Sun bearOP
for a client component form, i want to fetch some Data for a Dropdown field. The Server action is async as its fetching data from the Database.
how can i call the server action from the component?
how can i call the server action from the component?
Answered by B33fb0n3
You can also directly call the server action inside your server component to directly receive the data and pass it down via props to the client component
5 Replies
@Sun bear for a client component form, i want to fetch some Data for a Dropdown field. The Server action is async as its fetching data from the Database.
how can i call the server action from the component?
When you really want to call it from the client component, then you should use a client side fetching library like swr or react query. Like that you have control over the data.
If it's possible to fetch it server side first and pass the data down to your client component dropdown field, then do that instead.
If it's possible to fetch it server side first and pass the data down to your client component dropdown field, then do that instead.
@B33fb0n3 When you really want to call it from the client component, then you should use a client side fetching library like swr or react query. Like that you have control over the data.
If it's possible to fetch it server side first and pass the data down to your client component dropdown field, then do that instead.
Sun bearOP
maybe i get it wrong, but im fetching the Data from the database in a server action already, the server function is just asynchronous. Maybe there is a better way?
server component:
server component:
export async function getAllIdentifiersForInsert() {
const identifier = await db.query.identifier.findMany({
columns: {
id: true,
friendlyName: true,
}
})
return identifier
}@Sun bear maybe i get it wrong, but im fetching the Data from the database in a server action already, the server function is just asynchronous. Maybe there is a better way?
server component:
export async function getAllIdentifiersForInsert() {
const identifier = await db.query.identifier.findMany({
columns: {
id: true,
friendlyName: true,
}
})
return identifier
}
You can also directly call the server action inside your server component to directly receive the data and pass it down via props to the client component
Answer
Sun bearOP
oh yeah! havent thought of that!
happy to help