Media Queries with Javascript (Axios)

Question

I would like to change a variable "photo_length" by Mediaquery change. However, when I try it in the axios, it doesn't seem to work. Could you give me any advice?

*When I don't use mediaquery, "photo_length" works.

axios.get("test.php").then(instagram_data=>{
  console.log(instagram_data); 
  const gallery_data = instagram_data["data"]["media"]["data"];
  let photos = "";

  // media query event handler
  if (matchMedia) {
    const mq = window.matchMedia("(min-width: 500px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
  }

  // media query change
  function WidthChange(mq) {
    if (mq.matches) {
      // window width is at least 500px
      let photo_length = 10;
    } else {
      // window width is less than 500px
      let photo_length = 8;
    }
  }

  for(let i = 0; i < photo_length ;i++){
    photos += '<li class="gallery-item"><img src="' + gallery_data[i].media_url + '"></li>';
  }
  document.querySelector("#gallery").innerHTML = photos;
}).catch(error=>{
  console.log(error);
})