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

Question

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' });
  }
});

Shashi · Accepted Answer · 2021-12-02 18:56:56Z

1

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
  });

answered Dec 2, 2021 at 18:56

Shashi

4746 silver badges21 bronze badges

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

Comments

Heartbit · Accepted Answer · 2021-12-02 17:23:34Z

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>
  )
}

tran dinh thang · Accepted Answer · 2021-12-03 04:14:22Z

0

I recommend you install axios.

Learn more https://www.npmjs.com/package/axios
Using:

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

answered Dec 3, 2021 at 4:14

tran dinh thang

292 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related