fetch fails for an API
Answered
Sohel Shekh posted this in #help-forum
I am having a 3rd party API for postal code deails, I want to use it in my Next app.
When running this api on Browser (GET), Postman, ThunderClient, Online API Testers it works completely fine and returns the intended data.
However when running through fetch or axios I am not getting any data, actually
In network tab the request is marked as red (indicating error) but the response Status Code is 200 OK with no data and console log shows Network Error (axios logs)
THE API: https://www.postpincode.in/api/getCityName.php?pincode=387001
I am not sure what I am missing!
When running this api on Browser (GET), Postman, ThunderClient, Online API Testers it works completely fine and returns the intended data.
However when running through fetch or axios I am not getting any data, actually
In network tab the request is marked as red (indicating error) but the response Status Code is 200 OK with no data and console log shows Network Error (axios logs)
THE API: https://www.postpincode.in/api/getCityName.php?pincode=387001
I am not sure what I am missing!
Answered by Sohel Shekh
So, to perform this I need to make an server action, have this api fetch in that and call the server action from the Client;
41 Replies
show what code you're doing and the error you're receiving
or a sandbox or smth
Sure
Code:
Error:
const getCityDistrictState = async (pincode: string) => {
try {
const response = await axios.get(
`https://www.postpincode.in/api/getCityName.php?pincode=${pincode}`
);
console.log(response.data[0]);
return response.data[0];
} catch (error) {
console.log(error);
return null;
}
};Error:
can you please tag your form as pages or app router 🙂
ok sick. So if you are in app router, first thing is you should use fetch instead of axios
you lose all the integrated features of fetch if you use axios
if it still doesnt work with fetch, i would wager that its because you are querying the api from an http address not an https address
I am using fetch throughout the application, but initially in fetch i was not getting proper error msg so I posted the axios code.
There is something with CORS but I dont know what to do with that
There is something with CORS but I dont know what to do with that
The cors is the http error i mentioned above
are you doing this client side or server side
(i forgot to ask)
Client side on btn click
ahhhhhhh thats why
you are meant to do fetches server side
which is why fetch was doing weird stuff
does the button click bring you to a new page? or does it just fill in a place on the page?
So, to perform this I need to make an server action, have this api fetch in that and call the server action from the Client;
Answer
Nah nah, it remains on the same page, when call's complete it should fill the State, Country and all fields from the data fom api
gotcha gotcha. Yeah i think i personally would do a server action and set those as searchParams, but barring that you probably need to do it as a server component form
but how button onclick in server comp! 🤔
so it fetches in the server action and does a
redirect('/somePath?state=${state}&country=${country}') etcbutton type submit and and wrap in a form
It is already inside a form (Formik) for saving the address details.
Form > Form > Submit Btn ???
Form > Form > Submit Btn ???
You would move your form logic to the server action and away from the other thing
you can also have a specific action on your button iirc. lemme check the docs
yep you would just set the formAction prop on the specific button
and let your outer form handle the submit
What I always do (don't know if it's the best way)
- axios.get in a nextjs api call (api/ folder) which accepts a query
- make a function in utils/ which takes a parameter and passes that parameter as a query. Can also do parameter validation, and response error handling, ...
- now you can use the function wherever you want, just import it and pass the parameter
- axios.get in a nextjs api call (api/ folder) which accepts a query
- make a function in utils/ which takes a parameter and passes that parameter as a query. Can also do parameter validation, and response error handling, ...
- now you can use the function wherever you want, just import it and pass the parameter
This is the way it was done in 12, not so much in 13 though
and definitely not for app router
I did in that way only just rather than in the api folder its in the client side, the function is in utils.
Guess I need to learn things more
Guess I need to learn things more
Can't, form logic is saving the address details in localStorage till payment is done (to not fill the db with unwanted addresses) so form action has to be in the client
Can you share the link!
you could save it as a temporary cookie instead
looks like I'll have to check the new stuff 
Hmm have to play more, actually in hurry for MVP I am going with literal the first thing that's hitting my mind!
Always frustrating when theres new stuff to learn guys, just remember it is worth it in the end 🙂
I have a client app (more than half done) in v12 which is full of useEffect and useState. Meanwhile v13 is now main and learning this but that app is so big now that I can't even imagine migrating it 🫠