Question 204355 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React App + Express JS Server + Axios frontend request = "undefined" options params on Server

I have Googled this problem over and over and can’t seem to find the solution.

Here is my frontend code:

export const getBlog = (sortColumn, sortOrder) => async dispatch => {
  
 console.log("blogActions.js => getBlog() executed.");
 console.log("sortColumn = " + sortColumn);
 console.log("sortOrder = " + sortOrder);

 let options = {
            order: [sortColumn, sortOrder]
            };
            

  try{
  // call the api. Get all our feedback from our endpoint.
  const res = await axios.get('/api/blog', options

    
  /*
  {
    params: {
      sortColumn: "Heading", 
      sortOrder: "ASC"
        }
    } */
  );

Here is my backend code:

router.get('/', async (req, res) => {
    console.log('/api/blog - get');
    
    // Return all blog.
    // We need to query our database to get our data.
    // We will do this by using the findAll() function, to get all the feedback in the feedbacks table.
    // Note: Remember if we use await, we need an async before(req, res).

    console.log("req.query = " + req.query);
    console.log("req.params = " + req.params);
    //const { sortColumn, sortOrder} = req.params;
    const { sortColumn, sortOrder} = req.query;
    console.log(sortColumn);
    console.log(sortOrder);


    try{
    const list = await Blog.findAll(
      
      /*
      {
      order: [[sequelize.col(sortColumn)]]
      } 
    */
    );

    // send the list back to the client.
    res.send(list);
    }
    catch(e)
    {
        console.log(e); // error
    }

  });

The req.query and req.params on the backend both result in "undefined".

Any ideas how to solve this problem?

Kind Regards,

John
Melbourne, Australia

This is the debugging output on the server when requesting data from the frontend client:

frontend request, VS Code server console

I have tried using Postman and the params get passed through just fine, as you can see here:
Postman

VS Code server console

Tags:

2

Answers


  1. 0

    The Axios option for URL query parameters is params…

    params are the URL parameters to be sent with the request
    Must be a plain object or a URLSearchParams object

    See Axios – Request Config

    If you expect to receive sortColumn and sortOrder params in req.query, you’ll need to construct your options like this

    axios.get("/api/blog", { params: { sortColumn, sortOrder } })

    A word of warning though, some versions of Axios have a bug around URL query serialisation. I would always recommend using the Fetch API instead of Axios.

    const baseURL = process.env.REACT_APP_API_BASE_URL;
  // or "http://localhost:3001/", etc

const url = new URL("/api/blog", baseURL);
url.searchParams.append("sortColumn", sortColumn);
url.searchParams.append("sortOrder", sortOrder);

const res = await fetch(url);
const data = await res.json();

    If you wanted to use req.params, you’d need to define your route with route parameters

    router.get("/:sortColumn/:sortOrder", (req, res) => {
  const { sortColumn, sortOrder } = req.params;

  // ...
});

    and send the request like this

    axios.get(
  `/api/blog/${
    encodeURIComponent(sortColumn)
  }/${
    encodeURIComponent(sortOrder)
  }`
)

    I would not recommend this method for this type of request.

    Login or Signup to reply.
  2. 0

    try change your axios get to this, the req query should be there in req.query

    axios.get(`/api/blog?sortColumn=${sortColumn}&sortOrder=${sortOrder}`);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search