Typical file structure in Reactjs application: grouping API calls in api.js

Question

Just wanted to know how to group all of my API calls altogether in an api.js file, in my React App (just some pseudocode would work). I have read an interesting article that introduces that idea, and I feel curious because that file structure really fits my needs. How would it be? Moreover, the author states in a comment:

I usually just put all of my API calls into that file - they're usually small one-or-two-line functions that call out to axios, and I just export them.

export function login(username, password) { ... } export function getFolders() { ... } etc.

But I feel it lacks some details to reproduce it. I am new to Javascript and React. Thanks.

Answer 1

Say you are using axios for http calls, I guess it would be smth like this:

api.js:

import axios from 'axios';
import { resolve } from './resolve.js';

export async function login(user, pass) {
  return await resolve(axios.post('http://some-api.com/auth', { user, pass }).then(res => res.data));
}

export async function getUser(id) {
  return await resolve(axios.get(`http://some-api.com/users/${id}`).then(res => res.data));
}

// and so on....

And as he said on the post, If your files starts to get too big, you can create a src/api/ and create separate files like src/api/auth.js, src/api/users.js, etc..

To resolve the promises I like to use the new async/await syntax and wrap it in a little module resolver.js:

export function async resolve(promise) {
  const resolved = {
    data: null,
    error: null
  };

  try {
    resolved.data = await promise;
  } catch(e) {
    resolved.error = e;
  }

  return resolved;
}

And your component smth like:

// ...
componentDidMount() {
  this.getUser();
}

async getUser() {
  const user = await api.getUser(this.props.id);
  if(user.error)
    this.setState({ error: user.error });
  else
    this.setState({ user: user.data });
}

Again, this is something I like to do, I think the code looks clearer, keeping a synchronous structure. But I guess it's perfectly fine to resolve your promises with .then() and .catch() also.

I hope that helped!

Answer 2

It depends on how much API functions a project has. I usually stick with project structure called "grouping by file type" mentioned in React official website and keep API related files in a separate directory where every file has an API functionality dedicated to a specific entity.

However, for small projects, it makes sense to keep all API functionality in one file.