offline first : refactoring chaining requests mess in useEffect

Question

I have to develop an application which has the prerequisite of using local data (indexeddb) as a priority (whether the network is available or not. The goal is not to overload the network). It's my first reactjs app and I know I don't have the right reflexes

I managed to code something but it's a mess and probably buggy. I'll have to apply the same principle on several pages The page I coded is very simple: it displays a list of suppliers. This list comes from an api but I want to store it in indexeddb and use the data that is in indexeddb then. The list of suppliers won't change

Can someone guide me to write something cleaner ?

const SUPPLIERS_URL = "/suppliers.php";

const Fournisseurs = () => {
   
    const [suppliers, setSuppliers] = useState([]);
    const [nbSuppliers, setNbSupplier] = useState();

    useEffect(() => {
        const fetchFournisseurs = () => {
            const dbOpenRequest = indexedDB.open("salon", 1);
            // https://stackoverflow.com/questions/33054891/transactioninactiveerror-failed-to-execute-add-on-idbobjectstore-the-trans
            dbOpenRequest.onsuccess = function (event) {
                const db = event.target.result;
                const txn = db.transaction("suppliers", "readwrite");
                const store = txn.objectStore("suppliers");
                const countSuppliers = store.count();
                countSuppliers.onsuccess = function () {
                    setNbSupplier(countSuppliers.result);
                    console.log("nb fou", countSuppliers.result);
                };
                if (nbSuppliers !== 0) {
                    console.log("des suppliers dans indexeddb");
                    const getAllRequest = store.getAll();
                    getAllRequest.onsuccess = function () {
                        setSuppliers(getAllRequest.result);
                    };
                }
            };
        };
        fetchFournisseurs();
        const suppliersFromApi = async () => {
            console.log(" suppliersFromApi pas de suppliers dans indexeddb");
            await axios.post(SUPPLIERS_URL, "data").then(function (response) {
                console.log("list fou", suppliers);
                const dbOpenRequest = indexedDB.open("salon", 1);
                dbOpenRequest.onsuccess = function (event) {
                    const db = event.target.result;
                    const txn = db.transaction("suppliers", "readwrite");
                    const store = txn.objectStore("suppliers");
                    suppliers.forEach((supplier) => {
                        console.log("ajout fou");
                        store.add(supplier);
                    });
                };
                setSuppliers(response.data);
                setNbSupplier(response.data.count());
                console.log("nb de fou ds idb apr insert", response.data.count(), nbSuppliers);
            });

            console.log(suppliers);
        };
        if (nbSuppliers === 0) {
            suppliersFromApi();
        }
    }, [nbSuppliers]);