api hooks

Products.js

const Products = () => {
  const { loading, data: products, refetch } = useApiGET(`/products`);
  const api = useApi();
  if (loading) {
    return <Loading />;
  }

  return (
    <div>
        {products.map(p => (
         <div key={p.id}>
           <h1>{p.name}</h1>
           <button onClick={async () => {
             await api.delete(`/products/${p.id}`);
             refetch();
           }}>Delete</button>
         </div>
        ))}
    </div>
  );
};

useApi.js

import { useRef } from "react";
import axios from "axios";

export default () => {
  const api = useRef(
    axios.create({
      baseURL: `${process.env.REACT_APP_API_URL}`
    })
  );
  return api.current;
};

useApiGET.js

import { useState, useEffect } from 'react';

import useApi from './useApi';

export default path => {
  const api = useApi();
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState();
  const [refetch, setRefetch] = useState(0);
  useEffect(() => {
    const getData = async () => {
      setLoading(true);
      const result = await api.get(path);
      setData(result.data);
      setLoading(false);
    };
    
    getData();
  }, [path, api, refetch]);
  return { data, loading, refetch: () => setRefetch(refetch + 1) };
};