Client/Server Mutations

Hey, I'm trying to wrap my head around client vs server components in my app. Here's the basic structure I'm using:

{DetailsView}
  - type = server
  - grabs data from various sources 
    {DetailsViewForm}
        - type = client
        - Receives data as props from parent server component
        - User React Hook Form

{DetailsView}
  - type = server
  - grabs data from various sources 
    {DetailsViewForm}
        - type = client
        - Receives data as props from parent server component
        - User React Hook Form

This approach works well for returning the data in a clean and fast way while allowing for interactivity in the form. Where I'm getting lost is how to submit the form. I can submit it client side with the useMutate hook, but then I'm not sure how to fetch new data. It seems more ideal to use the server mutate function instead, but I can't figure out how to call that from a client component. I can make this all work with client components, but it seems like the direction of the App router in Next.js is to move toward server components. Thanks

4 Replies

kaleembhatti•10mo ago

You can look into server actions

kaleembhatti•10mo ago

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations

Data Fetching: Server Actions and Mutations | Next.js

Learn how to handle form submissions and data mutations with Next.js.

noynek2242OP•10mo ago

Great, thanks for the direction. Definitely wrapping my head around the server-oriented direction still and trying to understand the patterns. Thanks Ok, spent a few hours on this and here's what I ended up with: The way T3 is setup using the Next.js App Router, it seems like my api router is already using server actions, but maybe I'm misunderstanding. OnSave, I'm able to call the api router with mutation.mutateAsync(values); My Next challenge was how do I take those returned values and repopulate the form? The issue being if there are any differences between what was saved vs the state of the form. This one took me a while because I'm using uncontrolled form field. What seems to work is to use the React Hook Forms reset method to replace the default values. Anyway, I don't know if there's a better way, but it seems to be working.

kaleembhatti•10mo ago

"The issue being if there are any differences between what was saved vs the state of the form" I would return the new state and save it inside the initialState (which is passed onto the server action). And based on that the form could update reflecting changes like success or fail, etc But your method works (if it works, it works, dont change it) this is just how i might complete the task

Gaming

Programming

Client/Server Mutations