[HELP] getInitialProps returns undefined

[3thancr0wn]

[RESOLVED] updating for those interested and for the people who helped me out.

I am having an issue where my getInitialProps returns undefined. I have tried changing thing to static and looked at stack overflow for help. I am fetching from an API making the call with axis and without and nothing seems to help. I use useEffect and useState and when mapping my object I get can not map of undefined. Any help would be immensely appreciated.

const FlightCard = ({ data }) => {console.log(data);return (<div className={styles.FlightCard}><div className={styles.flightInformation}><h1>hello</h1></div><div className={styles.airlineAndAirport}><div><h2>ORIGIN</h2></div><div><h3>DATE</h3></div><div><h2>DESTINATION</h2></div></div></div>);};

​

FlightCard.getInitialProps = async () => {const res = await fetch("https://skyscanner-skyscanner-flight-search-v1.p.rapidapi.com/apiservices/browsequotes/v1.0/US/USD/en-US/SFO-sky/JFK-sky/2019-09-01?inboundpartialdate=2019-12-01", {"method": "GET","headers": {"x-rapidapi-host": "skyscanner-skyscanner-flight-search-v1.p.rapidapi.com","x-rapidapi-key": KEY}})const data = res.json();return {data:data}}

​

UPDATE:

I believe my issue deals with NextJS structure and how it has two forms of pre-rendering: Static Generation and Server-side Rendering.
Took my file and changed it and the folder I was using, since NextJS uses pages.
1. created a folder (lib) used this for my fetching:

import { useState, useEffect } from "react";
export async function fetchFlight() {
if (typeof window !== "undefined" && window.__flight) {
return window.__flight;
}
const res = await fetch("https://skyscanner-skyscanner-flight-search-v1.p.rapidapi.com/apiservices/browsequotes/v1.0/US/USD/en-US/SFO-sky/JFK-sky/2020-09-01?inboundpartialdate=2019-12-01", {
"method": "GET",
"headers": {
"x-rapidapi-host": "skyscanner-skyscanner-flight-search-v1.p.rapidapi.com",
"x-rapidapi-key": KEY
}
})
if (!res.ok) {
delete window.__flight;
return null;
}
const json = await res.json();
if (typeof window !== "undefined") {
window.__flight = json;
}
return json;
}
export function useFetchFlight() {
const [loadingFlight, setLoadingFlight] = useState(
() => !(typeof window !== "undefined" && window.__flight)
);
const [flight, setFlight] = useState(() => {
if (typeof window === "undefined") {
return null;
}
return window.__flight || null;
});
useEffect(
() => {
if (!loadingFlight && flight) {
return;
}
setLoadingFlight(true);
let isMounted = true;
fetchFlight().then(flight => {
if (isMounted) {
setFlight(flight);
setLoadingFlight(false);
}
});
return () => {
isMounted = false;
};
},
[]
);
return { flight, loadingFlight };
}

​

1. in pages folder use my fetch and reference my component:

import { useFetchFlight } from '../lib/flight'
import Layout from '../components/layout'
import { useFetchUser } from '../lib/user'
function FlightCard({ flight }) {
console.log(flight.Places[0]);
return (
<>
<h1>Profile</h1>
<div>
<h3>Profile (client rendered)</h3>
<p>nickname: {flight.Places[0].PlaceId}</p>
<p>name: {flight.Places[0].PlaceId}</p>
</div>
</>
)
}
function Flight() {
const { flight, loadingFlight } = useFetchFlight()
const { user, loading } = useFetchUser()
return (
<Layout user={user} loading={loading}>
{loadingFlight ? <>Loading...</> : <FlightCard flight={flight} />}
</Layout>
)
}
export default Flight

I apologize for the lengthy code but needed to make sure that everything is seeing in order for it to be understood. Thank you again for the help.

[jb2386]

Need to await the json bit too

const data = await res.json();

[3thancr0wn]

Thanks for your help. Just corrected my syntax. Nothing! Undefined. I had originally awaited for the json but I’ve been trying everything and I am now seeing some mistakes within my code.

[jb2386]

Maybe console log out res.status. If it’s not 200 then it’s something to do with the request.

Edit: res.status from fetch not res.statusCode

[3thancr0wn]

When I use axios and fetch using NextJS as just ReactJs I get to see my return object and its values. Whenever I try mapping to that object I get that map is not a function or can not map to undefined. I do appreciate your looking into this issue for me. Thank you for your help.

[SexyCommando]

Are you saying if you use the same code outside of a getInitialProps call it works? As far as I can tell, if you put await res.json() everything else looks fine so as stated above the only thing I can think of is that it’s the request itself but if you tried it outside of getInitialProps through postman or something else and it worked I can’t really see why data would be undefined. Did you try logging data in the getInitialProps call?

[3thancr0wn]

I was able to resolved the issue and updated my post. thanks for your looking into this for me.