-2

I am trying to build an e-commerce site with Next.JS and Strapi. Whenever I try to request data from Strapi to Next.JS, I always get error:-

FetchError: request to http://localhost:1337/api/products?populate=* failed, reason: connect ECONNREFUSED 127.0.0.1:1337

?populate=* in the link is to receive all data and I also tried without it.

This is how I am requesting data:-

export async function getServerSideProps() {
  let data = await fetch('http://localhost:1337/api/products?populate=*', {
    method: 'GET',
    headers: {
      'Authorization': 'Bearer api-token',
    },
 });
 let products = await data.json();
 return {
   props: { products },
 };
}

I have read many similar questions but can't find anything. I have checked everything many times but still not working. However, when I make the request with the same API token using thunder client, it gives me a status: 200, and I also receive data in JSON format without any error. It's been hours and everything looks good but still not working.

elliot
  • 71
  • 1
  • 4
  • are you doing this from a docker container? what about your thunder client, is it running from inside the container? – Igor Shmukler May 21 '22 at 10:57
  • 1
    `ECONNREFUSED 127.0.0.1:1337` means there is no server running on localhost port 1337 – Gereon May 21 '22 at 10:59
  • I am not using docker. Everything is running on my PC and Strapi is running on localhost:1337. I receive data using thunder client but not in Next.JS – elliot May 21 '22 at 11:06
  • Is `http://localhost:1337/api/products` pointing to an internal Next.js API route, or a separate external server? – juliomalves May 21 '22 at 17:54

2 Answers2

1

Changing "localhost" to "127.0.0.1" fixed it for me

reference:

strapi FetchError: request to http://localhost:1337/api/events failed, reason: connect ECONNREFUSED ::1:1337

Dương Đức Anh
  • 11
  • 2
0

First and foremost, when fetching from your nextjs api, you don't call the full url, (i.e., 'localhost'), you just start the call with /api/more/params

export async function getServerSideProps() {
  // next api routes use a proxy under the hood,
  // so you just need to call `/api/` then the rest of the params :)
  let data = await fetch('/api/products?populate=*', {
    method: 'GET',
    headers: {
      'Authorization': 'Bearer api-token',
    },
 });
 let products = await data.json();
 return {
   props: { products },
 };
}

I also think it’s first going to be worth reading (and will likely answer your question) the documentation on getServerSideProps

It can be tempting to reach for an API Route when you want to fetch data from the server, then call that API route from getServerSideProps. This is an unnecessary and inefficient approach, as it will cause an extra request to be made due to both getServerSideProps and API Routes running on the server.

While this may not entirely solve the problem, given then lack of further details, both these recommendations should certainly be a good start and get us goin on solving this!

Mytch
  • 380
  • 1
  • 3
  • 16
  • 1
    I forgot to turn on the option in my Strapi which is compulsory if you want to receive data from a particular endpoint. And that's solved my problem. – elliot May 30 '22 at 13:52