Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A comprehensive starter solution to making API calls structured and manageable in code architecture and development teams.
import apiProvider from './provider';
export class ApiCore {
constructor(options) {
if (options.getAll) {
this.getAll = () => {
return apiProvider.getAll(options.url);
};
}
if (options.getSingle) {
this.getSingle = (id) => {
return apiProvider.getSingle(options.url, id);
};
}
if (options.post) {
this.post = (model) => {
return apiProvider.post(options.url, model);
};
}
if (options.put) {
this.put = (model) => {
return apiProvider.put(options.url, model);
};
}
if (options.patch) {
this.patch = (model) => {
return apiProvider.patch(options.url, model);
};
}
if (options.remove) {
this.remove = (id) => {
return apiProvider.remove(options.url, id);
};
}
}
}
import axios from 'axios';
import { handleResponse, handleError } from './response';
// Define your api url from any source.
// Pulling from your .env file when on the server or from localhost when locally
const BASE_URL = 'http://127.0.0.1:3333/api/v1';
/** @param {string} resource */
const getAll = (resource) => {
return axios
.get(`${BASE_URL}/${resource}`)
.then(handleResponse)
.catch(handleError);
};
/** @param {string} resource */
/** @param {string} id */
const getSingle = (resource, id) => {
return axios
.get(`${BASE_URL}/${resource}/${id}`)
.then(handleResponse)
.catch(handleError);
};
/** @param {string} resource */
/** @param {object} model */
const post = (resource, model) => {
return axios
.post(`${BASE_URL}/${resource}`, model)
.then(handleResponse)
.catch(handleError);
};
/** @param {string} resource */
/** @param {object} model */
const put = (resource, model) => {
return axios
.put(`${BASE_URL}/${resource}`, model)
.then(handleResponse)
.catch(handleError);
};
/** @param {string} resource */
/** @param {object} model */
const patch = (resource, model) => {
return axios
.patch(`${BASE_URL}/${resource}`, model)
.then(handleResponse)
.catch(handleError);
};
/** @param {string} resource */
/** @param {string} id */
const remove = (resource, id) => {
return axios
.delete(`${BASE_URL}/${resource}`, id)
.then(handleResponse)
.catch(handleError);
};
export const apiProvider = {
getAll,
getSingle,
post,
put,
patch,
remove,
};
export function handleResponse(response) {
if (response.results) {
return response.results;
}
if (response.data) {
return response.data;
}
return response;
}
export function handleError(error) {
if (error.data) {
return error.data;
}
return error;
}
const url = 'tasks';
const plural = 'tasks';
const single = 'task';
// plural and single may be used for message logic if needed in the ApiCore class.
const apiTasks = new ApiCore({
getAll: true,
getSingle: true,
post: true,
put: false,
patch: true,
delete: false,
url: url,
plural: plural,
single: single
});
apiTasks.massUpdate = () => {
// Add custom api call logic here
}
export apiTasks;
import React, { useEffect } from 'react';
import { apiTasks } from '@/services/api';
export function Tasks() {
const [tasks, setTasks] = useState([]);
useEffect(() => {
_getTasks();
}, []);
function _getTasks() {
apiTasks.getAll().then((res) => {
let arr = _parseTasks(res.results.data);
setTasks(arr);
});
}
function _parseTasks(tasks) {
return tasks.map((task) => {
// Parse task information
return task;
});
}
function _createTask(task) {
apiTasks.post(task).then((res) => {
// state logic
});
}
function _updateTask(task) {
apiTasks.patch(task).then((res) => {
// state logic
});
}
function _removeTask(id) {
apiTasks.remove(id).then((res) => {
// state logic
});
}
return (
<ul>
{tasks.map((task) => (
<li key={task.id}>{task.name}</li>
))}
</ul>
);
}
@kevinpallado

This comment has been minimized.

Copy link

@kevinpallado kevinpallado commented Apr 30, 2021

Hi, can you provide example for the customAPI call?

@abdes-zakari

This comment has been minimized.

Copy link

@abdes-zakari abdes-zakari commented May 5, 2021

Hi, can you provide example for the customAPI call?

up

@michaelmcshinsky

This comment has been minimized.

Copy link
Owner Author

@michaelmcshinsky michaelmcshinsky commented May 9, 2021

task-api-example.js has one. You can add your axios logic there.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment