9

I am trying to use getStaticProps to simply make a request and then pass that data from it to a component:

But I'm getting this error:

FetchError: invalid json response body at https://www.ajmadison.com/product3.0/packages.index.json.php?sku=RF28R7351SR reason: Unexpected token < in JSON at position 0

import AppliancePackage from '../components/AppliancePackage.jsx'; function HomePage({ data }) { return ( <> <AppliancePackage appliances={data} /> </> ); } export default HomePage; // This function gets called at build time on server-side. // It won't be called on client-side, so you can even do // direct database queries. See the "Technical details" section. export async function getStaticProps() { // Call an external API endpoint to get data. // You can use any data fetching library var res = await fetch( 'https://www.ajmadison.com/product3.0/packages.index.json.php?sku=RF28R7351SR' ); var json = await res.json(); data = JSON.stringify(json); console.log('data ', data); return { props: { data: json, }, }; }

I tried to Stringify it, but that didn't work! Also I am kind of confused by the comments:

This function gets called at build time on server-side. It won't be called on client-side, so you can even do direct database queries. See the "Technical details" section.

And then as you can see there is a comment that states:

Call an external API endpoint to get posts.

But have a whole section regarding API routes in their docs

Anyone can help me what is the matter?

Update

Alexey contributed some great insight, but like I said to him I can't find in the axios docs to change the user-agent!

Improve this question

5 Answers 5

Reset to default
3

Alexey got me on the right track! Thanks my friend!

Wound up you have to do this:

export async function getStaticProps() { // Call an external API endpoint to get posts. // You can use any data fetching library var res = await axios.get( 'https://www.ajmadison.com/product3.0/packages.index.json.php?sku=RF28R7351SR', { headers: { Accept: 'application/json, text/plain, */*', 'User-Agent': '*', }, } ); var res = JSON.stringify(res.data); console.log('res ', res); // By returning { props: posts }, the Blog component // will receive `posts` as a prop at build time return { props: { data: res, }, }; }

this being adding the headers:

 headers: { Accept: 'application/json, text/plain, */*', 'User-Agent': '*', },

And * for any User-Agent

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

I think the endpoint you're referring to is for some reason sensitive to "User-Agent".

When I tried fetching it with CURL like this, it returned some HTML response (which is not valid JSON ofcourse)

curl https://www.ajmadison.com/product3.0/packages.index.json.php?sku=RF28R7351SR

But this way it did work and returned JSON, just like if reached via browser:

curl -H "User-Agent: some browser" https://www.ajmadison.com/product3.0/packages.index.json.php?sku=RF28R7351SR

TLDR: try adding "user-agent" header to your request.

Improve this answer

2 Comments

Thanks but I tried looking at the axios docs to add that—but couldn't find it. Do you have any ideas?
have you tried like this? github.com/axios/axios/issues/2560#issuecomment-555778304
2

For me it was .json() called for HTTP errors returning HTML in response body

Improve this answer

Comments

1

Instead of using res.status(200).json(data) in the api file, use res.status(200).json(JSON.stringify(data)). This will eliminate JSON error in the console. This worked for me.

Improve this answer

Comments

0

i think the data is not been fetch from the end that why. i face same problems i restarted my system and network and it works perfectly back

Improve this answer

1 Comment

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.