/users?username=${username}` is mapping to /users in JavaScript

Question

I am creating social media app.

For some reason my route of:

const res = await axios.get(`/users?username=${username}`);

is returning all users

All users endpoint is

/users

I have been debugging for at least 5 hours but I don't know how its mapping from /users?username=${username} to /users

This is my getUsers API

const getUsers = async (req,res,next)=>{
    try {
      const users = await User.find();
      res.status(200).json(users);
    } catch (err) {
      next(err);
    }
  }

This is the route:

//get all user
router.get("/", verifyUser, getUsers);

I haven't defined the following anywhere

/users?username=${username}

I don't know why this route is using my getUsers API. Please help

P.S. this is where it's all happening:

client/src/pages/profile

import "./profile.css";
import Topbar from "../../components/topbar/Topbar";
import Sidebar from "../../components/sidebar/Sidebar";
import Feed from "../../components/feed/Feed";
import Rightbar from "../../components/rightbar/Rightbar";
import {useState, useEffect} from "react"
import axios from "axios";
import { useParams } from "react-router"

export default function Profile() {
  const PF = process.env.REACT_APP_PUBLIC_FOLDER
  const [user,setUser] = useState({})
  const username = useParams().username
   
  useEffect(() => {
    const fetchUser = async () => {
      const res = await axios.get(`/users?username=${username}`);
      setUser(res.data)
    }
    fetchUser()
  },[username])
  
  console.log(user)
  return (
    <>
      <Topbar />
      <div className="profile">
        <Sidebar />
        <div className="profileRight">
          <div className="profileRightTop">
            <div className="profileCover">
              <img
                className="profileCoverImg"
                src={user.coverPicture || PF+"post/ronaldo.jpg"}
                alt=""
              />
              <img
                className="profileUserImg"
                src={user.profilePicture 
                  ? PF + user.profilePicture 
                  : PF + "persons/noavatar.png"}
                alt=""
              />
            </div>
            <div className="profileInfo">
                <h4 className="profileInfoName">{user.username}</h4>
                <span className="profileInfoDesc">{user.desc}</span>
            </div>
          </div>
          <div className="profileRightBottom">
            <Feed username={username}/>
            <Rightbar user={user}/>
          </div>
        </div>
      </div>
    </>
  );
}

Since you haven't posted the server code, how do you expect us to know why it's working this way? — Barmar, Dec 23 '22 at 23:02
Like @Barmar stated, we can't see the server code, but it seems like it's a server side issue in your controller method since it's ignoring the query parameter. — Owen, Dec 23 '22 at 23:10
perhaps [this](https://stackoverflow.com/a/67937272/4935162) will be of use — Yarin_007, Dec 23 '22 at 23:13
https://github.com/mshaheeruddin/Social-Media-Application/tree/master/apis Please see this if you want to see server side as I have added all the code — Dragut, Dec 23 '22 at 23:13
The `getUsers` method is mapped to all routes via that `router` line, that's why it's getting run even with query string. If you make a request to `'/'`, it will likely run `getUsers`. Map specific routes to get more specific routing. — Heretic Monkey, Dec 23 '22 at 23:16
I suspect [reading the documentation](https://expressjs.com/en/guide/routing.html#route-parameters) would be a good start; that's how I would find out to tell you. — Heretic Monkey, Dec 23 '22 at 23:24

score 0 · Answer 1 · answered Dec 24 '22 at 06:30

you need 2 endpoints for different logic here

const getUsersByUsername = async (req,res,next)=>{
try {
  const {username} = req.params
  const user = await User.find(username);
  res.status(200).json(user);
} catch (err) {
  next(err);
}

}

router.get('/users', getUsers()) - for all users
router.get('/users/:username', getUserByUsername()) - for user by params
username - is your params

/users?username=${username}` is mapping to /users in JavaScript

1 Answers1