Search code examples
javascriptnode.jsnext.jsstrapi

How do i fetch data from api endpoint

I'm running nextjs for my front end (port 3000), trying to fetch api endpoints from strapi (port 1337). How do I go about using my frontend application in order to fetch data from my backend. Is there a way that both ports can run simultaneously, or am I doing something wrong?

If I run on port 3000 I receive a GET request error ERR_CONNETION_REFUSED, obviously - because the data on port 1337 isn't available because port 1337 isn't running.

My file structure for the project is the following:

my_app

--backend folder(strapi files and runs on on port 1337)

--frontend folder(contains all nextjs and runs on port 3000)

Code:

import Header from '../components/Header'
import useFetch from '../public/hooks/useFetch'

export default function Home() {

  const { loading, error, data } = useFetch('http://localhost:1337/reviews')

  return (
    
    <>

    <Header/>

    HOME


    </>
  )
}
Solution

  • To make your life easier, I do recommend you to install "Documentation" on the marketplace. After that, you will have access to "Documentation in plugins", there you will be able to check your API, and use "Retrieve your JWT token" to obtain a test token to test all your API.

    From there you will have access to Swagger App, and you will be able to check all the API functionality.

    enter image description here

    Now, you can access all your API from the server URL i.e: GET http://localhost:1337/helpers

    Note: Be sure to make your APIs accessible to your roles on Settings/Roles on the Admin panel. From there, you can also check the URI you will be using.

    In your case, to access http://localhost:1337/reviews be sure to make reviews accessible on the public or private side respectably.

    enter image description here

    After that, you will access your strapi endpoints from the strapi URL as //localhost:1337/your_endpoint