Next.js: Are two sequential api calls inside one getServerSideProps possible?

Question

My page renders details of a selected event from a database of events. It requires two sets of data from two different APIs are present to set-up the page's content.

• The second api call relies on a piece of information (movieId) from the first call, which it needs to use as an argument
• So the two API calls need to occur in sequence
• Importantly, some 'events' have 'externalData' and some don't. Only those with 'externalData' have a 'movieId' and should then be able to call data from the second api

Currently:

• For simplicity I have stripped down my page so only two h1 tags can be rendered
• At the moment, only the first h1 tag renders; "{event.name}" (see below)
• In the serverside console I see that the second api call is either timing out or returning undefined (see location of logs below)
• I get this error but that is new and seems to be a caching problem in Next.js
• If I refresh the page, I only get the error

getServersideProps:

export async function getServerSideProps(context) {
        const venueId = context.params.venueId;
        const date = context.params.slug[0];
        const eventId = context.params.slug[1];
        const locale = context.locale;

        const event = await getEventTypeByVenueIdAndDate(venueId, date, eventId);
        const eventAsJson = await JSON.parse(JSON.stringify(event))
        
        let movie

        if (event.externalData) {
            movie = await getMovieById(event.externalData.movieId);
            console.log('ServerSide movie-data:', movie); 
        }

        return {
            props: {
                venueId: venueId,
                movieId: movieId,
                date: date,
                eventProp: eventAsJson,
                eventId: eventId,
                locale: locale,
                movieProp: JSON.parse(JSON.stringify(movie)),
            },
        };
}

Page code:

export default function EventDetailPage(props) {

    const { eventProp, movieId, date, eventId, locale, movieProp, cineamoId } = props

    const [event, setEvent] = useState(eventProp);
    const [movie, setMovie] = useState(movieProp);

    if (!event) {
        return (
            <>
                <LoadingAnimation/>
            </>
        );
    }

    return(<div>
            <h1>{event.name}</h1>
            <h1>{movie.originalTitle}</h1>
    </div>
    )
}

getMovieById function:

import { companyClient } from "./apiClient"

export async function getMovieById(movieId){

    let param = `movie/display/${movieId}`;

    return companyClient.post(param)
        .then(response => {
            console.log(response.data.items[0]);
            return response.data.items[0];
        })
        .catch(function (error) {
            return error;

        });

}

companyClient in apiClient: (these are standard for all apiCalls)

export const companyClient = axios.create({
    baseURL: process.env.NEXT_PUBLIC_ENV_LOCAL_VARIABLE,
    headers: headers,
    data: formData,
    auth: {
        username: "************",
        password: "************"
    },
    timeout: 3000,
    withCredentials: true,
});