Next.js Discord

Discord Forum

Error when calling a next api route

Unanswered
Ant posted this in #help-forum
Open in Discord
AntOP
I'm getting this error -> Error: getaddrinfo ENOTFOUND mvp.localhost\n at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:108:26) , when calling a next api route.

45 Replies

can u send the command / code you used for that
AntOP
async function onLoginFormSubmitted() {
    setIsLoading(true);

    try {
      mutateUser(
        await axios.post("api/login", {
          email,
          password,
        })
      );
    } catch (error) {
      console.log("page: ", error);
      let message;
      if (error?.response?.data?.non_field_errors[0]) {
        message = error.response.data.non_field_errors[0];
      } else {
        message =
          (error.response &&
            error.response.data &&
            error.response.data.message) ||
          error.message ||
          error.toString();
      }
      toast.error(message);
      setIsLoading(false);
    }
  }
Here I call the api route
export default async function handler(req, res) {
  const session = getIronSession(req, res, sessionOptions);
  const userData = await req.body;

  try {
    const {
      data: { username },
    } = await authService.login(userData);

    const user = { isLoggedIn: true, username };
    session.user = user;
    await session.save();
    res.json(user);
  } catch (error) {
    res.status(500).json(error);
  }
}
Here is the api route definition
const login = async (userData) => {
  const { email, password } = userData;
  const response = await globalAxios.post(
    "login/",
    {
      email,
      password,
    },
    { withCredentials: true }
  );

  return response.data;
};
Here is the authService login function
@Ant I'm getting this error -> Error: getaddrinfo ENOTFOUND mvp.localhost\n at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:108:26) , when calling a next api route.
Ray
what is the baseUrl for globalAxios? look like it failed to resolve the DNS for mvp.localhost?
AntOP
but when I call mvp.localhost from postman, it works fine
AntOP
yes, I think. Both nextjs and my django rest api is running on localhost
AntOP
Didn't test but it needs url because we handle databases with subdomains
AntOP
yes
Ray
so could you try to set the baseUrl on globalAxios to the ip:port of the django api and see if it works?
AntOP
Didn't work and now, the response returns just an empty object
Ray
so might be something wrong on the django side?
AntOP
It looks like now nextjs is finding the django app but django returns status 200
Ray
ok meaning it is working?
AntOP
yes
but nextjs api route is still giving error
@Ant Click to see attachment
Ray
something wrong on your api route
either getIronSession or authService.login
AntOP
how can I debug this ?
Ray
export default async function handler(req, res) {
  const session = getIronSession(req, res, sessionOptions);
  console.log({ session })
  const userData = req.body;
  
  try {
    const {
      data: { username },
    } = await authService.login(userData);
    console.log({ username })
    const user = { isLoggedIn: true, username };
    session.user = user;
    await session.save();
    res.json(user);
  } catch (error) {
    console.log(error)
    res.status(500).json(error);
  }
}
const login = async (userData) => {
  try {
  const { email, password } = userData;
  const response = await globalAxios.post(
    "login/",
    {
      email,
      password,
    },
    { withCredentials: true }
  );

  return response.data;
  } catch (error) {
    console.log(error)
  }
};
AntOP
none of these console logs are been reached
async function onLoginFormSubmitted() {
    setIsLoading(true);

    try {
      mutateUser(
        await axios.post("api/login", {
          email,
          password,
        })
      );
    } catch (error) {
      console.log("page: ", error);
      let message;
      if (error?.response?.data?.non_field_errors[0]) {
        message = error.response.data.non_field_errors[0];
      } else {
        message =
          (error.response &&
            error.response.data &&
            error.response.data.message) ||
          error.message ||
          error.toString();
      }
      toast.error(message);
      setIsLoading(false);
    }
  }
only this
Ray
what is mutateUser
AntOP
import { useEffect } from "react";
import Router from "next/router";
import useSWR from "swr";

export default function useUser({
  redirectTo = "",
  redirectIfFound = false,
} = {}) {
  const { data: user, mutate: mutateUser } = useSWR("/api/user");

  console.log("useUser: ", user);

  useEffect(() => {
    // if no redirect needed, just return (example: already on /dashboard)
    // if user data not yet there (fetch in progress, logged in or not) then don't do anything yet
    if (!redirectTo || !user) return;

    if (
      // If redirectTo is set, redirect if the user was not found.
      (redirectTo && !redirectIfFound && !user?.isLoggedIn) ||
      // If redirectIfFound is also set, redirect if the user was found
      (redirectIfFound && user?.isLoggedIn)
    ) {
      Router.push(redirectTo);
    }
  }, [user, redirectIfFound, redirectTo]);

  return { user, mutateUser };
}
@Ant async function onLoginFormSubmitted() { setIsLoading(true); try { mutateUser( await axios.post("api/login", { email, password, }) ); } catch (error) { console.log("page: ", error); let message; if (error?.response?.data?.non_field_errors[0]) { message = error.response.data.non_field_errors[0]; } else { message = (error.response && error.response.data && error.response.data.message) || error.message || error.toString(); } toast.error(message); setIsLoading(false); } }
Ray
async function onLoginFormSubmitted() {
    setIsLoading(true);

    try {
    
      const res =  await axios.post("api/login", {
          email,
          password,
        })
      mutateUser(res.data)
    } catch (error) {
      console.log("page: ", error);
      let message;
      if (error?.response?.data?.non_field_errors[0]) {
        message = error.response.data.non_field_errors[0];
      } else {
        message =
          (error.response &&
            error.response.data &&
            error.response.data.message) ||
          error.message ||
          error.toString();
      }
      toast.error(message);
      setIsLoading(false);
    }
  }
AntOP
Actually, I'm just trying to follow this example from nextjs docs -> https://github.com/vercel/next.js/blob/canary/examples/with-iron-session/pages/login.tsx
In order to authenticate users
AntOP
same thing
@Ant same thing
Ray
check getIronSession
the server console should have error log
@Ant Click to see attachment
AntOP
just this
Ray
server console
AntOP
wow, server console shows the error