Not able to send requests from React frontend to Express Backend

Question

I am making a To-Do App with REACT frontend and EXPRESS backend

This is my App.jsx Code

import { useEffect, useState } from 'react'
import LandingPage from './components/LandingPage.jsx'
import Dashboard from './components/Dashboard.jsx'
import Navbar from './components/Navbar.jsx'
import axios from 'axios';
import './App.css';

function App() {

  // State hooks
  const [user, setUser] = useState(false);
  const [sign, setSign] = useState("up");
  
  // Sign Up or Sign In
  const toggleSign = () => {
    setSign(sign === "up" ? "in" : "up");
  }

  // changingUser
  const changeUser = (newUser) => {
    console.log("User is changing");
    setUser(newUser);
  }
 
  // rendering main component
  const mainRender = (user) => {
    if(user.isAuthenticated) {
      return (<><Dashboard name={user.name} /></>);
    } else {
      return (<><LandingPage changeUser={changeUser} toggleSign={toggleSign} sign={sign} /></>);
    }
  }

 // getting dashboard response
 useEffect(() => {
    async () => {
      const response = await axios.get('/api/dashboard');
      setUser(response.data);
    }
  });

  // registering user
  useEffect(() => {
    console.log("User Changed");
    if(user) {
      async () => {
        const response = await axios.post('/api/register', user);
        console.log(response.data.registrationSuccessful);
        if(response.data.registrationSuccessful) {
          setUsernameChecks(false);
          toggleSign();
        } else {
          setUsernameChecks(true);
        }
      }
    }
  }, [user]);

  return (
    <>
      <Navbar />
      {mainRender(user)}
    </>
  )
}

export default App
 

This is my index.js code

//post register Route
app.post("/api/register", async (req, res) => {
    console.log("recieved post request");
    try {
        const result1 = await db.query("SELECT * FROM users WHERE username = $1", [req.body.username]);
        if(result1.rows.length === 0) {
            try {
                bcrypt.hash(req.body.password, saltRounds, async (err, hash) => {
                    if(err) {
                        console.error(`Error hashing passwrod: ${err}`)
                        res.json({registerationSuccessful: false, registerationMessage: err});
                    } else {
                        await db.query("INSERT INTO users (username, password, name) VALUES ($1, $2, $3)", [req.body.username, hash, req.body.name]);
                        res.json({registerationSuccessful: true});
                    }
                });
            } catch(err) {
                console.error(`Error executing insert query: ${err}`);
                res.json({registerationSuccessful: false, registerationMessage: err});
            }
        } else {
            res.json({registerationSuccessful: false, registerationMessage: "USER ALREADY EXITS!!!"});
        }
    } catch (err) {
        console.error(`Error executing search query: ${err}`);
        res.json({registerationSuccessful: false, registerationMessage: err});
    }
});

//get dashboard route

app.get("/api/dashboard", (req, res) => {
    console.log("recieved get dashboard request");
    res.json({...req.user, isAuthenticated: req.isAuthenticated()});
});

I have checked through POSTMAN and my index.js is working properly, user is getting registered and getting stored in database using POSTMAN. In my react frontend the useState({}) variable user is getting set properly from Form component using the function changeUser(). As soon as I hit submit button in my Form component the user is getting set as I can see in my chrome dev tool. The console.logs are also executing: console.log("User is changing"); (from changeUser() function) console.log("User changed"); (from useEffect hook of registering user) But the request is not been send and I can confirm that because the console.logs in index.js file is not getting executed in case of both the routes (GET dashboard and POST register).

The following is my vite.config.js code for proxy server

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
})

I am not getting any error but the axios requests is also not getting executed. Please Help

Answer 1

Your frontend code is not running functions that make requests to the backend. I slightly corrected your code in useEffect to make everything work:

import axios from 'axios';
import { useEffect, useState } from 'react';

import Dashboard from './components/Dashboard.jsx';
import LandingPage from './components/LandingPage.jsx';
import Navbar from './components/Navbar.jsx';

import './App.css';

function App() {
    // State hooks
    const [user, setUser] = useState(false);
    const [sign, setSign] = useState('up');

    // Sign Up or Sign In
    const toggleSign = () => {
        setSign(sign === 'up' ? 'in' : 'up');
    };

    // changingUser
    const changeUser = (newUser) => {
        console.log('User is changing');
        setUser(newUser);
    };

    // rendering main component
    const mainRender = (user) => {
        if (user.isAuthenticated) {
            return (
                <>
                    <Dashboard name={user.name} />
                </>
            );
        } else {
            return (
                <>
                    <LandingPage changeUser={changeUser} toggleSign={toggleSign} sign={sign} />
                </>
            );
        }
    };

    // getting dashboard response
    useEffect(() => {
        const getDashboard = async () => {
            const response = await axios.get('/api/dashboard');
            setUser(response.data);
        };

        getDashboard();
    });

    // registering user
    useEffect(() => {
        console.log('User Changed');

        const registerUser = async () => {
            const response = await axios.post('/api/register', user);
            console.log(response.data.registrationSuccessful);
            if (response.data.registrationSuccessful) {
                setUsernameChecks(false);
                toggleSign();
            } else {
                setUsernameChecks(true);
            }
        };

        if (user) {
            registerUser();
        }
    }, [user]);

    return (
        <>
            <Navbar />
            {mainRender(user)}
        </>
    );
}

export default App;