CODEWITHSUNDEEP
reactjsrestaxios
mrzephyr
mrzephyr

Reputation: 79

What is the best way to structure REST backend API calls with React?

Currently me and some colleagues are building a full stack web application, using React as our frontend framework. In this application, we need to perform CRUD operations on multiple resources, therefore multiple pages.

In my previous experience, I found tutorials/courses that put API calls in a services folder. Here's a simple example.

However, I realized this approach doesn't address loading/error states. So, I tried to come up with a solution using hooks, following another example I found: code. This worked well for a feature I implemented, but I don't know how extensible it can be.

My question is, what is the better approach? Is there another one I didn't mention?

Upvotes: 2

Views: 3884

Answers (1)

Rebai Ahmed
Rebai Ahmed

Reputation: 1600

Reactjs is a library not a framework like Angular, there no one single approach how to handle your project structure. There are many alternatives, try to follow the good practices; if you are developing a big project that needs to scale use Redux as state management library, for me for a simple React project, we make folder called services and in an index file we prepare all our services : 

    /*  root services ⚓️ .. */

import axios from 'axios';



const API_URL = 'http://yourapi.com/api/';
const headers = { 'Content-Type': 'application/json' };


const add = (data) => axios.post(`${API_URL}/form`, data, { headers });

const getData = () => axios.get(`${API_URL}/hotels`, { headers });


 etc ...


export { 
  add,
  getData

};

And for the call into Components 

import { serviceName  } from '../services/index'; 
serviceName({/*params if it's necessary */ })
    .then(data => {
       //---Get your Data 
    })
    .catch(err => {
       //---Handle your Api call error 
    });

Upvotes: 1

Related Questions