Next.js Discord

Discord Forum

Server Action Fetch always Success

Answered
Blue horntail woodwasp posted this in #help-forum
Open in Discord
Blue horntail woodwaspOP
Here is my code for action 
"use server";

import { revalidatePath } from "next/cache";

export async function registerUser(prevState: any, formData: FormData) {
  console.log({
    name: formData.get("name"),
    email: formData.get("email"),
    password: formData.get("password"),
    confirm: formData.get("password_confirmation"),
  });

  try {
    const response = await fetch(`${process.env.API_URL}/register`, {
      method: "POST",
      body: JSON.stringify({
        name: formData.get("name"),
        email: formData.get("email"),
        password: formData.get("password"),
        password_confirmation: formData.get("password_confirmation"),
      }),
    });

    console.log({ response });

    revalidatePath("/register");
    return { message: "register success!" };
  } catch (error) {
    console.log({ error });
    return { message: "failed to create!" };
  }
}

this is my code @riský
Answered by Blue horntail woodwasp
Works fine with axios
View full answer

46 Replies

Blue horntail woodwaspOP
and this is my Fom Component : 
"use client";

import Button from "@/components/ui/button";
import Input from "@/components/ui/input";
import Link from "next/link";
import React from "react";
import { useFormStatus } from "react-dom";

import { useFormState } from "react-dom";
import { registerUser } from "../register/action";

const initialState = {
  message: "",
};

export default function RegisterForm() {
  const [response, register] = useFormState(registerUser, initialState);
  const status = useFormStatus();

  console.log("state : ", response);
  return (
    <div className="w-96 border-2 border-slate-800 ">
     ...
      <form
        action={register}
        className="p-6 flex flex-col items-center w-full gap-2"
      >
        <Input name="name" autoFocus label="Nama" id="name" />
        <Input name="email" label="Email" type="email" id="email" />
        <Input name="password" label="Password" type="password" id="password" />
        <Input
          name="password_confirmation"
          label="Konfirmasi Password"
          type="password"
          id="password_confirmation"
        />
       ...
      </form>
    </div>
  );
}
riský
can i ask why you aren't calling the register req on client? is it a local server?
Blue horntail woodwaspOP
My backend is local server
I also have a production one, but for now I test on local first
I though use a server action will be more secure?
riský
it looks like you might want to look at: https://nextjs.org/docs/app/building-your-application/data-fetching/forms-and-mutations#error-handling to see the intended intended (your code almost looks right)
wait your naming is off from what i expected, it looks like you are doing it right
and is your console.log not running? (like what was your og issue)
Blue horntail woodwaspOP
my console.log shown on terminal
riský
web browser terminal?
Blue horntail woodwaspOP
and off course on browser too, but it shown my initialState
riský
if you put it in the jsx, does it work/show then?
@riský if you put it in the jsx, does it work/show then?
Blue horntail woodwaspOP
yes, it's work
but the problem is, it's always return me the success message
since I return the message on try block
which always success
riský
but normal fetch shouldn't ever error (unless weird netwok error), so do you want to check response.ok and then throw?
Blue horntail woodwaspOP
I did
@Blue horntail woodwasp I did
riský
wait where?
and how should this error? (is it if 400 from api fetch)
Blue horntail woodwaspOP
I just deleted it. Before I type my code
It will error cause the email that I send already used for another user.
On backend I return a 422 error
riský
yeah that is smart, but i was wondering where you throw the error inside server action as fetch doesn't auto throw for that
Blue horntail woodwaspOP
wait
"use server";

import { revalidatePath } from "next/cache";

export async function registerUser(prevState: any, formData: FormData) {
  console.log({
    name: formData.get("name"),
    email: formData.get("email"),
    password: formData.get("password"),
    confirm: formData.get("password_confirmation"),
  });

  try {
    const response = await fetch(`${process.env.API_URL}/register`, {
      method: "POST",
      body: JSON.stringify({
        name: formData.get("name"),
        email: formData.get("email"),
        password: formData.get("password"),
        password_confirmation: formData.get("password_confirmation"),
      }),
    });

    console.log({ response });
    if(response.ok) {
        revalidatePath("/register");
        return { message: "register success!" };
    }
  } catch (error) {
    console.log({ error });
    return { message: "failed to create!" };
  }
}
I just did this
and it always return the success message
riský
so your fetch req is giving 200 or smth
Blue horntail woodwaspOP
on console. response, the status is 200
riský
i feel like that might be more of that server's issue then nextjs (unless nextjs has weird fetch)
can you try disabling caching on the req because it might be acting sus: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#individual-fetch-requests
fetch('https://...', { cache: 'no-store' })
Blue horntail woodwaspOP
okay I will try
riský
i have not that much hope for that tho
but if you try and use your api in insomnia or some api client, does that show your error or no (if it doesn't your issue may be in that server's code instead of your nextjs app)
Blue horntail woodwaspOP
okay I will try it
wait a moment.
Blue horntail woodwaspOP
in postman it return 422 response
riský
o.O
and the nextjs (without cache)
Blue horntail woodwaspOP
here is the response, I have remove the cache by cache : no-store
just like this
riský
well this is a little odd
Blue horntail woodwaspOP
it works when I use axios
Blue horntail woodwaspOP
Works fine with axios
Answer
riský
ahhh nextjs fetch is being weird