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

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

• javascript
• node.js
• reactjs
• mongodb

3 Answers 3

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

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

I remend you install axios.

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

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