How to create API utils reusable in Reactjs

Question

I'm a beginner in ReactJS, and I'm trying to improve the writing of my codes, and I ended up getting to the API calls part, I want to improve the reusability of my API calls and set them with a specific folder something like utils / APIcalls.js but I do not know the best way and the correct way to do this, I have the following API call getItems():

Home.jsx

export default class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            'items': [],
            isLoading: false,
            error: null,
        };
    }

    componentDidMount() {
        this.getItems()
        this.refresh = setInterval(() => this.getItems(), 100000);
    }

    componentWillUnmount() {
        clearInterval(this.refresh)
    }
    
    getItems() {
        this.setState({ 'isLoading': true });
        fetch('https://xxx/api/article/')
            .then(results => {
                if (results.ok) {
                    return results.json();
                } else {
                    throw new Error('Something went wrong ...');
                }
            })
            .then(results => this.setState({ 'items': results, 'isLoading': false }))
            .catch(error => this.setState({ error, isLoading: false }));
    }

    render() {
        const { isLoading, error } = this.state;

        if (error) {
            return <p>{error.message}</p>;
        }

        if (isLoading) {
            return <Loading />
        }

        return (
            <div className="container" >
                <div className="row align-items-start">
                    <Principal items={this.state.items} />
                </div>
                
                <hr />

                <div className="row align-items-start">
                    <Secondary items={this.state.items} />
                </div>
            </div>
        );
    }
}

I use the same call in multiple places, is there any way to set these calls globally, and call them more easily elsewhere in the code?

To solve this problem problem I used axios to create reusable functions:

I created a folder called by utils, inside that folder I created a file called by apiConfig.js and apiCalls.js:

import API from './apiConfig'

export default {
    getArticles: () => {
        return API.get('article')
            .then(res => res.data)
    },
    getUser: () => {
        return API.get('user')
            .then(res => res.data)
    }    
}

After that, I call that functions in the components using that way:

componentDidMount() {
        this.getItems()
    }

    getItems() {
        this.setState({ 'isLoading': true });
        API.getArticles().then(items => this.setState({ items, 'isLoading': false }))
            .catch(error => this.setState({ error, isLoading: false }));
    }

You can extract fetch + first then to a separate function and use it here — Volodymyr
– Volodymyr, Commented Nov 5, 2018 at 23:06
How would I extract it? would separate into another folder only with api calls? what would the folder structure look like? — Jefferson Bruchado
– Jefferson Bruchado, Commented Nov 5, 2018 at 23:10
It is completely up to you - as far as you are comfortable using it. I would suggest to create one file (/api/index.js) if there is not a huge number of such functions (up to 10-15). If there are more - try to group them somehow (for example domain-drivenly - /api/user.js, /api/products.js, etc) — Volodymyr
– Volodymyr, Commented Nov 5, 2018 at 23:14
i like API calls to go in actions that return thunks, although I may be biased because that's the structure I learned initially with react/redux — HolyMoly
– HolyMoly, Commented Nov 5, 2018 at 23:16
As stated in the comments it is much your own preferences that decide where you want the function to go in your folder structure. Maybe you don't even need a new separate folder if it's just one function. The main goal is to separate out the fetch into a reusable function and then put it in a file where you think it suits your needs and structure of the code best. One more thing you can do is to turn your fetch function into a higher order function. That way you can pass in a function as an argument. That argument function will calculate what to return from the fetch function. Flexible ;) — weibenfalk
– weibenfalk, Commented Nov 5, 2018 at 23:24

fvaldez421 · Accepted Answer · 2018-11-07 20:57:32Z

6

I agree with all the comments, your './utils/API.js' would look like this:

export default {
  getItems: () => {
    return fetch('https://xxx.api/article')
      .then(res => res.json());
  },
  otherApiCall: (params) => {
  }
}

The component like so:

import API from '../utils/API';

componentDidMount() {
  const items = API.getItems();
  this.setState({ items });
}

Wherever you import it, this call should result in your items, you can add error handling here or in the component. As HolyMoly commented, in Redux-Thunk I usually handle this in the actions (where the call is sent)

edited Nov 7, 2018 at 20:57

answered Nov 5, 2018 at 23:30

fvaldez421

1965 bronze badges

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

3 Comments

Jefferson Bruchado Over a year ago

I did what you quoted, however it is returning me undefined in items, and when I put a return in fetch, then returns me a promises, but not a json, any help for that?

fvaldez421 Over a year ago

Yes, I did forget return and the res.json() to extract the JSON body in the request. (I corrected the original response) Take a look at this: developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Jefferson Bruchado Over a year ago

Thanks, the way of Sean Kim and yours suggested worked perfectly!!

Sean Kim · Accepted Answer · 2018-11-06 03:30:45Z

1

In my opinion, I usually used these.

API/Axios_Api.js

import axios from 'axios';

const MYAPI= "YOUR API"
export const AXIOS_API = () => {
axios.get(MYAPI)
.then( res => res.data )
.catch (err => thorw{err})
};

answered Nov 6, 2018 at 3:30

Sean Kim

1691 gold badge2 silver badges10 bronze badges

2 Comments

Jefferson Bruchado Over a year ago

How do I call this function the correct way on the screens? when I'm calling on the screens it's bringing me the promise and not the results.json I need

Sean Kim Over a year ago

I need your Json file. because each Json file have a own structure

Collectives™ on Stack Overflow

How to create API utils reusable in Reactjs

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related