I currently have an index page set up like this:
getServerSideProps(){
//Making two API calls here
api1()
api2()
return{
props:{data:gotDataApi1, data2:gotDataApi2}
}
}
The data retrieved from these APIs is then passed to a component within the index page like so:
<component1 gotData1={gotDataApi1} gotData2={gotDataApi2}/>
Everything seems to be working fine with this setup. However, I now have a component where user interactions provide parameters for calling the next required API. Within this component, I've added a Link that passes user values like this:
<Link
href={`indexpage?paths=${parameter1}/${parameter2}/${parameter3}`}>
</Link>
Upon receiving these parameters in getServerSideProps(context), I use them to call another API. This call sometimes results in an error related to 'split undefined' as shown below:
const {params, req, res, query} = context;
var str = query.paths;
console.log(str); // Output: 2022/1/1001
const splitStrings = await str.split("/ ");
The sliced values are then used for another API call like this:
This is the api3() call: const response4 = await fetch(
http://localhost:3000/api/${splitStrings[0]}/${splitStrings[1]}/${splitStrings[2]}I'm looking to replace the existing structure with something like this:
<component1 gotData1={gotDataApi1} gotData3={gotDataApi3}/>
I've created a [...slug].js page which requires rendering the entire component similarly to my index page. The index page contains a side menu, and that code also needs to be included here:
<Side years={data2} chapters={data3} />
<component1 gotData1={gotDataApi1} gotData3={gotDataApi3}/>
The [...]slug].js page looks very similar to my index page. If anyone has suggestions on how to tackle this challenge, whether it involves using useEffect or following any standard practices, please let me know. Your assistance would be greatly appreciated.