how to share response from a server action to another components?
Answered
Polar bear posted this in #help-forum
Polar bearOP
So, my application has a certain flow where i use it practicallt everywhere.
Fetch data from backend, and display that data inside a data table.
So far, i managed to accomplish fetching data with server actions. But i could not wrap my head around how to share thet with my datatable component to display the response.
Here is a quick snippet of how i structure.
Page.ts
<AppFilter action=fetchBasvurus>
<AppList />
in app filter, i am using useFormState, inside thst component i can console log state.data and can see the data i want to use inside AppList. I am thinking about setting the state in AppFilter inside a global store, then convert AppList to client and access that state.
But i really am not sure if this is the best practice. I m not even sure if i am following the best practice so far. Any comment is appreciated.
Fetch data from backend, and display that data inside a data table.
So far, i managed to accomplish fetching data with server actions. But i could not wrap my head around how to share thet with my datatable component to display the response.
Here is a quick snippet of how i structure.
Page.ts
<AppFilter action=fetchBasvurus>
<AppList />
in app filter, i am using useFormState, inside thst component i can console log state.data and can see the data i want to use inside AppList. I am thinking about setting the state in AppFilter inside a global store, then convert AppList to client and access that state.
But i really am not sure if this is the best practice. I m not even sure if i am following the best practice so far. Any comment is appreciated.
Answered by averydelusionalperson
I'd simply merge both components into one, I see no use in differentiating it if you are not fetching on server component.
62 Replies
I lost what you were saying after
You can fetch the data on
page.tsx example:
Page.tsAnyways, if you want to fetch data from server side, and render it on data table.
<AppFilter action=fetchBasvurus>
<AppList />
You can fetch the data on
page.tsx, and create a new client component for datatable, and pass data from page.tsx -> DataTable.client.tsx component.page.tsx example:
const MainPage = async () => {
const data = await getData();
return (
<>
....
<DataTable data={data} />
....
</>
)
};@averydelusionalperson I lost what you were saying after
> Page.ts
>
> <AppFilter action=fetchBasvurus>
> <AppList />
Anyways, if you want to fetch data from server side, and render it on data table.
You can fetch the data on `page.tsx`, and create a new client component for datatable, and pass data from `page.tsx` -> `DataTable.client.tsx` component.
page.tsx example:
tsx
const MainPage = async () => {
const data = await getData();
return (
<>
....
<DataTable data={data} />
....
</>
)
};
Polar bearOP
i need to fetch data with form submit. the form is inside AppFilter component
When the submit inside AppFilter component is successful, it returns the response i need to use inside AppList component
so, you need the response from appFilter component inside the AppList component? May I ask what's that data, and why can't you simply fetch that inside the main server page?
Polar bearOP
So should i delete my AppFilter component(which is a form) and write the form inside the main component, then i can pass the returned response to the AppList?
if you can tell me why you need the response in AppList, I may offer a better solution 
Polar bearOP
Because user inputs some information to the form, and that information is sent to an external api whoch returns me the response i want
And in appList i have a table
Where i want to display the response
so, basically you are storing the form details in db?
@averydelusionalperson so, basically you are storing the form details in db?
and showing that data in a table?
Polar bearOP
Are you suggesting i should just merge these two components?
@averydelusionalperson and showing that data in a table?
Polar bearOP
Yep
then just fetch the data, in the main component. and in server action, revalidate the path, or tag if it's a fetch api.
^ check out these links
Polar bearOP
So i should take out my Form out of form component right
Because i need the form data from the user
Will check those, thanks
in the scenario you suggest, i cannot wrap my head around how to make nextjs get the user input
- page.tsx -> fetch Data (suppose
-> Form.tsx -> onSubmit -> store data -> revalidate
-> DataTable -> get
mainData is variable name)-> Form.tsx -> onSubmit -> store data -> revalidate
mainData-> DataTable -> get
mainData variable passed from main page, and when the mainData is revalidated, the data is automatically reloaded.@Polar bear in the scenario you suggest, i cannot wrap my head around how to make nextjs get the user input
and why would you need the "user input"?
Polar bearOP
because data is filtered on the backend.
In the database, there are certain applications. Each application has ID, user wants to get s specific ID, so he inputs the id number to the form, backend returns the data with specific id. I need the user input. This is how they created the database. They are not letting me use prisma or anything. Just an api endpoint.
In the database, there are certain applications. Each application has ID, user wants to get s specific ID, so he inputs the id number to the form, backend returns the data with specific id. I need the user input. This is how they created the database. They are not letting me use prisma or anything. Just an api endpoint.
now you are telling a complete different scenario, previously you said, you are storing the formData in db, and showing that data in table.
so, what you want is a id number from the form?
so, what you want is a id number from the form?
like a search query, or something?
@averydelusionalperson now you are telling a complete different scenario, previously you said, you are storing the formData in db, and showing that data in table.
so, what you want is a id number from the form?
Polar bearOP
User inputs stuff to Form.
Form data is sent to backend
Backend responds with the data.
Data needs to be shown inside a datatable
appfilter component handles user input and there is a server action inside it.
Applist component should access the response returned in app filter component.
Everything works so far, i am getting the data i want from the db. All i want is to access thst data in a different component.
Is this more clear?
Form data is sent to backend
Backend responds with the data.
Data needs to be shown inside a datatable
appfilter component handles user input and there is a server action inside it.
Applist component should access the response returned in app filter component.
Everything works so far, i am getting the data i want from the db. All i want is to access thst data in a different component.
Is this more clear?
I might have mis explained myself. Sorry about that, but this is all there is to it
I'd simply merge both components into one, I see no use in differentiating it if you are not fetching on server component.
Answer
Polar bearOP
Hmm, this is also what i have been thinking bout it. I am just used to seperating everything into components
i will either merge them or use a global store solution right
I wouldn't use global store personally when this ain't even global, just between two components
Polar bearOP
So if i merge them into one single component, that component will be a client component.
page.tsx
<MergedComponent /
but my page.tsx will still be a server component right?
page.tsx
<MergedComponent /
but my page.tsx will still be a server component right?
Polar bearOP
Allright, I think this is the best way to do this
@Polar bear Allright, I think this is the best way to do this
dam, that was a simple question. but poorly asked, no offense
or maybe my english is just bad
anyways, all the best 👍
Polar bearOP
Thanks
if your problem is solved, consider marking the message that helped you as solution
Original message was deleted
^, like this
Polar bearOP
Oh i did already
But application did not respond apparently
thanks, lmao questionable choice for the message that you've picked as solution.
anyways, +1 for me
@averydelusionalperson thanks, lmao questionable choice for the message that you've picked as *solution*.
Polar bearOP
I am on the phone, i corrected it now
Thanks again 👍
Polar bearOP
Probably,i should stop seperating stuff to their own components especially, just old habits
@Polar bear Probably,i should stop seperating stuff to their own components especially, just old habits
I keep seperate components if my main data source is my server component, but in your case it's not
since you need the data from submitting the form
Polar bearOP
exactly
And everything in our apps are just form submissions haha
@Polar bear And everything in our apps are just form submissions haha
that's sad, I like to keep seperate components for each functionality.
Polar bearOP
in old react code base, everything is in its own components with async thunk used for data fetching
So they never needed to think about client or server component stuff
Polar bearOP
Thanks man, you made me feel loved
All the best