Search code examples
reactjspostgresqlexpressfetch

Fetching data from postgres db - coming back with an error: Unexpected end of JSON input


I am trying to get the data from database but it's coming back with an error: Unexpected end of JSON input

My server get route:

app.get("/auth/login", async (req, res) => {
  try {
    const { email, password } = req.body;
    const findUser = await pool.query(
      "SELECT * FROM users WHERE email = $1 AND password = $2",
      [email, password]
    );
    console.log(findUser, "findUSER");
    res.json(findUser.rows[0]);
  } catch (err) {
    console.error(err.message);
  }
});

And the component that is fetching the data:

const Login = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [user, setUser] = useState([]);

  const login = async () => {
    try {
      const response = await fetch("http://localhost:5000/auth/login");
      const jsonData = await response.json();
      console.log(jsonData, "jsonData");

      setUser(jsonData);
    } catch (err) {
      console.error(err.message);
    }
  };

  return (
    <div>
      <h1>Login</h1>
      <label>Email</label>
      <input
        type="email"
        onChange={(e) => {
          setEmail(e.target.value);
        }}
      />
      <label>password</label>
      <input
        type="password"
        onChange={(e) => {
          setPassword(e.target.value);
        }}
      />
      <button onClick={login}>Log in</button>
    </div>
  );
};

Do you know what might be an issue?

Thanks


Solution

  • I am not sure what you are using to interact with your db but I believe that select all from will always return an array meaning find user is more semantically correct with a name of foundUsers. if findUsers is an array, you cannot access rows on an array. You would need to access findUsers[0]