CODEWITHSUNDEEP
javascriptnode.jsreactjsmongodb
AHMAD IRSHAD
AHMAD IRSHAD

Reputation: 119

How can I fetch data from mongoDB and display it on react front end

I am new to MERN and I am learning it. I don't know how to fetch all the data from a specific collection and display the data of each record on separate cards. I have developed the backend code and is working perfectly when I send requests via postman but fetching and displaying data from React app is a problem for me. How can I do that?

My Backend API code

router.get('/ads', async (req,res,next)=>{
  try{
    const ads = await Ads.find();

    return res.status(200).json({
      success: true,
      count: ads.length,
      data: ads,
    });
  } catch(err) {
    console.log(err);
    res.status(500).json({ error: 'server error' });
  }
});

image

Upvotes: 2

Views: 19225

Answers (3)

tran dinh thang
tran dinh thang

Reputation: 29

I recommend you install axios.

useEffect(() => {
  const getAds = async () => {
    const res = await axios.get('/ads')
    console.log(res.data)
  }
  getAds()
}, [])

Upvotes: 0

Shashi
Shashi

Reputation: 474

Just use the AXIOS library to do your REST calls in the front-end. What you created in your nodejs project is just an endpoint, now you will have to make an API call to the endpoint from the front end.

Answer by Heartbit is also apt, but typically in React, devs use the AXIOS library for the rest API calls.

Read the docs here: https://www.npmjs.com/package/axios

As you are starting watch a tutorial on AXIOS if the documentation is too much for you.

After importing Axios, inside useEffect hook, you should be writing something like this:

axios.get('/ads')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

Upvotes: 1

Heartbit
Heartbit

Reputation: 1836

There are many ways that you can query to get data from your API server. so here I am trying to describe two of them.

1. By native browser Fetch API:


const AdsContainer = ({children}) => {
  const [data, setData] = useState();

  useEffect(() => {
    fetch('/ads').then(response => {
      setData(response.json())
    })
  }, [])

  return (
    <AdsComponent data={data}>
      {children}
    </AdsComponent>
  )
}

2. by react-query:

This will give you more synchronized handling like loading, Error, Caching, and more.

First, at the top level of your app, you should provide it.

import { QueryClient, QueryClientProvider } from "react-query";
import AdsContainer from "./AdsContainer";

const queryClient = new QueryClient()
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="App">
        <AdsContainer />
      </div>
    </QueryClientProvider>
  );
}

Then your AdsContainer could fetch data as bellow:

import {useQuery} from "react-query";

const AdsContainer = ({children}) => {
  const query = useQuery('todos', () => {
    return fetch("/ads").then(response => {
      return response.json()
    })
  })

  
  /* logics that depends on your data
   * userEffect(() => {}, [data.length])
   */

  return (
    <AdsComponent data={query.data}>
      {children}
    </AdsComponent>
  )
}

Upvotes: 0

Related Questions