How would you handle create/edit form in place?

[vvo]

Hi there, I'd like to get ideas on how would you use SWR to handle pages that are both for create and edit data?

Example:

• I have teams, with existing API routes like POST /team (create), GET /team/2 (read), PUT /team/2 (update)
• Using Next.js, I already made it so /team/new and team/1 will display the same create or edit form
• In my team page I have two cases, either the url is "team/new" then I display the form with default values
• Or the url is "team/2" then I use swr to display a form with the values to display and update
• On the new form case, when the form is submitted, I use Router.replace to redirect to team/$newId
• On the edit form case, when the form is submitted, I just mutate the team so the page is updated (like the team title on top of the form)

Now this is almost FINE but ideally I'd like the new form case, when submitted, to just refresh the page with new content. But router.replace does reload the page and so there's a small blank screen pause before content is loaded. I am stuck on how I could make this better, any idea?

I though about still using SWR even for the new case and handling the "id=new" part server side (sending default data, etc..).

Thanks!

[jensmeindertsma]

Hello @vwo, could you try out getting the url with useRouter, and checking whether router.pathname contains new. In that case you could redirect to team/$newId. Perhaps you could try creating a dynamic route for team/#id as team/[id] and create a team/new route specifically for the create page?

[vvo]

Hey there, as for the routing of team/new and /team/2 this is solved thanks! I am more looking at best practices as for not having a full page reload when transitioning from "team creation page => team edit page" and just update the whole page in place. I guess to handle that I would have to not differentiate /new too much and just create a state where id = "new" is handled in a way.

[jensmeindertsma]

Hey @vvo ! I'm glad it's solved. You can probably solve that full page reload by replacing Router.replace with Router.push. Do you have a repository of this code somewhere? I'd be glad to take a look!

[vvo]

Hey both push and replace are triggering the issue: because in my page I basically have this:

if (route path is new team)
  h1 New team
  show edit form with defaults
else (route path has id)
  {team, mutate} = useSWR teamId
  h1 team.name
  show edit form using data from useSWR

And I think that's the main issue, it would maybe be better to do this:

const { team, mutateTeam } useSWR(existingId or New) // behind the scenes this would either get the team or provide default data
h1 team.name
show edit form

WDYT? This is what I wanted to open as a discussion if anyone got the same pattern

[jensmeindertsma]

You can't use useSWR conditionally because it is a hook ( not sure whether you actually do this because the example is contrived ). Also, I would create two separate pages. In the docs it says:

Predefined routes take precedence over dynamic routes

So you could create a /team/new.tsx page and it would work as a page where a user can create a team. You can also create a /tean/[id].tsx page that will have a lower priority than the predefined page.

After a user has created a team, store it in a DB, and redirect with router.push() ( use the useRouter hook ) to /team/{teamID} ( replace {teamID} with teamID just saved to DB ). Then the user is redirected and the /team/[id] page will get the ID as a query param. You can get this with router.query.id in this case. Then, fetch the team data from the DB with useSWR and display it. You can then mutate it from there.

You can also detect whether the user has already created a team when he navigates to the /team/new page and redirect the user to their edit page if you want to.

[alexanderbluhm]

Hi I have kind of the same problem.
I have an edit form where I can edit data. Then, I want to redirect to the index page and display the edited data without refetching it from the API. Does anyone solved this problem?

[sergiodxa]

The easiest way is to call mutate to fill the cache you are going to need before navigating

[alexanderbluhm]

@sergiodxa I figured this out myself but I have another huge problem and can't find the mistake.
I don't know why but data is undefined here. I am sure I use the same key I also use when calling useSWR. I rebuild this on CodeSandbox and it works. I am searching for the mistake for hours .. :D

mutate(
  "https://swapi.dev/api/people/",
  (data) => {
    console.log("data", data);
    return { message: "hi" };
  },
  false
);

[alexanderbluhm]

I found the issue. It seems that mutation does not work on dynamic sites, e.g. pages/user/[userid]/edit.
I will create an issue for this.