Iam facing issues for rehydration of zustand store with persisted data in indexeddb.

[Ashish50514561]

Hi I am using idbkeyval for persisting data to indexeddb but everytime i refresh , the hydration is not done on the persisted data instead iam getting initial states ,please guys help me out , this is my store and i am not calling any setter function on initial render and data is being stored in indexeddb correctly.

import { Mutate, State, StoreApi, create } from "zustand";
import { persist, createJSONStorage, StateStorage } from "zustand/middleware";
import saveToLocalStorage from "./components/localStorage";
// import { db } from "./db";
import { get, set, del } from "idb-keyval";
type StoreWithPersist = Mutate<StoreApi, [["zustand/persist", unknown]]>;

const storage: StateStorage = {
getItem: async (name: string): Promise<string | null> => {
console.log(name, "has been retrieved");
console.log("here is data from storage", await get(name));
const store = await get(name);

const x = JSON.stringify(store);
console.log({ x });

return x || null;

},
setItem: async (name: string, value: string): Promise => {
console.log(name, "with value", value, "has been saved", value);
const x = (await get(name)) || null;
console.log({ x, value });

await set(name, { ...JSON.parse(value).state });

},
removeItem: async (name: string): Promise => {
console.log(name, "has been deleted");
await del(name);
},
};

const useStore = create(
persist(
(set, get) => ({
cat: "meow",
bears: "hawwww",
dataBase: false,
check: null,
_hasHydrated: false,

  setDataBase: (database: any) =>
    set((state: any) => {
      return { dataBase: database };
    }),

  increasePopulation: () =>
    set((state: any) => {
      // console.log(
      //   "deers",
      //   state.dataBase &&
      //     saveToLocalStorage(state.dataBase, { deers: "Josephine", age: 21 })
      // );
      return { cat: "i can also talk" };
    }),
  checkPopulation: () =>
    set((state: any) => {
      // console.warn(
      //   "bears",
      //   state.dataBase &&
      //     saveToLocalStorage(state.dataBase, { bears: "check", age: 21 })
      // );
      return { check: "i can talk" };
    }),

  inPopulation: () =>
    set((state: any) => {
      // console.warn(
      //   "name",
      //   state.dataBase &&
      //     saveToLocalStorage(state.dataBase, { name: "in", age: 21 })
      // );
      return { bears: "ialk" };
    }),
  removeAllBears: () => set({ bears: 0 }),
}),
{
  name: "food-storage", // unique name
  storage: createJSONStorage(() => storage),
  version: 1, // a migration will be triggered if the version in the storage mismatches this one

  skipHydration: true,
  onRehydrateStorage: (state) => {
    console.log("hydration starts");

    console.log({ state });
    // optional
    return (state, error) => {
      if (error) {
        console.log("an error happened during hydration", error);
      } else {
        console.log({ state }, "after hydration");

        console.log("hydration finished");
      }
    };
  },
}

)
);

module.exports = useStore;