Requesting API data using getStaticProps() returns undefined object | Nextjs

Question

I'm new to new to nextjs. I'm making a real estate web using bayut API . And got trouble requesting agencies data from the API. I want to show list of agencies on my page like so: ss taken from bayut.com

index.js:

import { baseUrl, fetchApi } from "../utils/fetchApi";

export default function Agency({ agencyList }) {
  console.log({ agencyList }); // <====I need this
  return <div>aaa</div>;
}

export async function getStaticProps() {
  //Fetch agencies list
  const agencyList = await fetchApi(
    `${baseUrl}/agencies/list?hitsPerPage=25&page=0&lang=en`
  );
  return {
    props: {
      agencyList: agencyList?.hits,
    },
  };
}

fetchApi.js:

import axios from "axios";

export const baseUrl = "https://bayut.p.rapidapi.com";

export const fetchApi = async (url) => {
  const { data } = await axios.get(url, {
    headers: {
      "x-rapidapi-host": "bayut.p.rapidapi.com",
      "x-rapidapi-key": process.env.NEXT_PUBLIC_RAPIDAPI_KEY,
    },
  });
  return data;
};

In console returns:

{agencyList: undefined}agencyList:

undefined[[Prototype]]: Object

While It will return property object as it should if I change the url to:

/properties/list?locationExternalIDs=5002&purpose=for-sale&hitsPerPage=1

it will return:

agencyList: Array(1)}

agencyList: Array(1)

0: {id: 2828151, ownerID: 1101619, userExternalID: '1101619', sourceID: 1, state: 'active', …} length: 1

I'm expecting to return similar kind of data as the property object. I also tried to copy the code from the API page but no luck:

2nd index.js:

import axios from "axios";
import React, { useState, useEffect } from "react";
const Agency = () => {
  const [agentList, setAgentList] = useState([]);

  const options = {
    method: "GET",
    url: "https://bayut.p.rapidapi.com/agencies/list",
    params: { hitsPerPage: "25", page: "0", lang: "en" },
    headers: {
      "x-rapidapi-host": "bayut.p.rapidapi.com",
      "x-rapidapi-key": process.env.NEXT_PUBLIC_RAPIDAPI_KEY,
    },
  };

  const fetchAgentList = async () => {
    const response = await axios.request(options);
    setAgentList(response.data);
  };

  useEffect(() => {
    fetchAgentList();
  }, []);

  useEffect(() => {
    console.log(agentList);
  }, [agentList]);

  return <div>aaa</div>;
};

export default Agency;

It returns an empty array:

[]

length: 0

[Question 1]Any idea how to solve this? Am I missing any parameter? Also above code wont return any error message but, if I create a new page, named localhost:3000/agency , and copy the index.js code to agency.js , it will run to this error message:

Server Error Error: Error serializing .agencyList returned from getStaticProps in "/agency". Reason: undefined cannot be serialized as JSON. Please use null or omit this value.

Even requesting property object (which works on index.js ) it won't work on agency.js page.[Question 2] Does it means I can only use getStaticProps() on / page only (why this happend)? or do I need to initialize something?

Sorry for messy post. first time posting. Thankyou!

tl;dr A real estate web requesting API data. getStaticProps() works on property object but not on agency object. what am I missing here?

Answer 1

Got it working, I just need to add query: '{some word}' into the parameter. It is stated on rapidApi page that the paramater is optional but I guess I couldn't make request without it.