I've converted my create-react-app to a next js app to start SSG, I tested the getStaticProps function with a jsonplaceholder API and I was able to retrieve the data and display it, but for some reason it keeps returning undefined when I changed the api.
Here is the code
import React, { useState } from 'react';
export const getServerSideProps = async () => {
const response = await fetch(`https://sample.firebaseio.com/Properties.json?orderBy="/records/0/Address/City"&equalTo="City"`);
const getData = await response.text();
const parsedData = JSON.parse(getData);
const keyName = Object.entries(parsedData);
return {
props: { properties: keyName }
}
}
const PropertiesByCity = ({ properties }) => {
const [getProperties, setProperties] = useState([]);
setProperties(properties);
return (
<div className="map__wrapper">
{getProperties.map(([key, value]) => {
try {
return (
<div key={key} className="listing__wrapper">
<div key={key} className="property__main-photo">
<img key={key} src={value.records[0].Photo.PropertyPhoto[0].PhotoURL} />
<h1 key={key}>{new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
}).format(value.records[0].Price).slice(0, -3)}</h1>
<h1 key={key}>{value.records[0].Address.StreetNumber} {value.records[0].Address.StreetName}</h1>
<p key={key}>{value.records[0].Address.City}</p>
</div>
<div key={key} className="listing__info">
<div key={key} className="listing__info-bedbath">
{value.records[0].Building.BedroomsTotal}
<p className="listing__info-bedbath-bottom">Bedrooms</p>
</div>
<div key={key} className="listing__info-bedbath">
{value.records[0].Building.BathroomTotal}
<p className="listing__info-bedbath-bottom">Bathrooms</p>
</div>
</div>
</div>
);
} catch (error) {
return (<p> </p>)
}
}
)}
</div>
);
};
export default PropertiesByCity;
The JSON that is returned from calling this api looks something like this:
{"records":[{"Address":{"AddressLine1":"1234 Sample ","City":"Stoney Point","Country":"Canada","Latitude":"0000000","Longitude":"0000000","PostalCode":"11111","Province":"Ontario","StreetAddress":"1234 Sample","StreetName":"ST. CLAIR","StreetNumber":"1234"},"Phones":{"Phone":[{"_XmlAttributes":{"ContactType":"Business","PhoneType":"Telephone"},"_XmlContent":"(229) 999-2223"},{"_XmlAttributes":{"ContactType":"Business","PhoneType":"Fax"},"_XmlContent":"(111) 111-1111"},{"_XmlAttributes":{"ContactType":"Business","PhoneType":"Toll Free"},"_XmlContent":"(111) 113-1113"}]},"PhotoLastUpdated":"Wed, 01 Sep 2021 15:22:00 GMT","Position":"Sales Person","Websites":{"Website":{"_XmlAttributes":{"ContactType":"Business","WebsiteType":"Website"},"_XmlAttributes":{"ID":"12334566"}},"AlternateURL":{"VideoLink":"https://youtu.be/D-kfhdskjfh"},"Board":"34","Building":{"ArchitecturalStyle":"Ranch","BathroomTotal":"2","BedroomsAboveGround":"3","BedroomsBelowGround":"0","BedroomsTotal":"3","ConstructionStyleAttachment":"Detached","ExteriorFinish":"Stone, Concrete/Stucco","FireplacePresent":"False","FlooringType":"Hardwood, Cushion/Lino/Vinyl","FoundationType":"Concrete","HeatingFuel":"Natural gas","HeatingType":"Forced air","Rooms":{"Room":[{"Dimension":"Measurements not available","Length":"","Level":"Basement","Type":"Utility room","Width":""},{"Dimension":"Measurements not available","Length":"","Level":"Basement","Type":"Storage","Width":""},{"Dimension":"Measurements not available","Length":"","Level":"Main level","Type":"4pc Bathroom","Width":""},{"Dimension":"Measurements not available","Length":"","Level":"Main level","Type":"5pc Ensuite bath","Width":""},{"Dimension":"Measurements not available","Length":"","Level":"Main level","Type":"Laundry room","Width":""},{"Dimension":"Measurements not available","Length":"","Level":"Main level","Type":"Bedroom","Width":""},{"Dimension":"Measurements not available","Length":"","Level":"Main level","Type":"Primary Bedroom","Width":""},{"Dimension":"Measurements not available","Length":"","Level":"Main level","Type":"Living room","Width":""},{"Dimension":"Measurements not available","Length":"","Level":"Main level","Type":"Eating area","Width":""},{"Dimension":"Measurements not available","Length":"","Level":"Main level","Type":"Kitchen","Width":""},{"Dimension":"Measurements not available","Length":"","Level":"Main level","Type":"Foyer","Width":""}]},"StoriesTotal":"1","Type":"House"},"Business":{"Franchise":""},"Features":"Double width or more driveway, Gravel Driveway","Land":{"Acreage":"false","SizeIrregular":"109XIRREG FT","SizeTotalText":"109XIRREG FT"},
The JSON is a series of objects that are similar to this, but not pasting all of them, you get the point.
The code was working just fine with a useEffect in my react app, and this file worked fine when I tested it with a JSONplaceholder API, but for some reason it isn't working when I use my firebase api. I can't seem to find a better way to debug this using console.log() like I can in a client side rendered app.
I am calling this component with a in my index.js file.
I can't seem to debug with console.logs either, it is just returning undefined.
If someone could give me an answer, or a better way to test the app to debug this problem, please let me know.
The answers that I've seen have just stated that the getStaticProps should only be called in the index.js file, but it worked when using the JSonplaceholder API.
