Create one global store with multiple createResource

export type AppContextType = {
  store: Store<any>;
  setStore: SetStoreFunction<any>;
};

const AppContext = createContext<AppContextType>();

async function fetchDbData<T>(query: string) {
  const db = await Database.load("sqlite:mydatabase.db");
  return await db.select<T[]>(query);
}

const categories = createResource(async () =>
  fetchDbData<Category>("SELECT * FROM category;"),
)[0]();

const items = createResource(async () =>
  fetchDbData<Item>("SELECT * FROM item;"),
)[0]();

export const AppProvider: Component<any> = (props: any) => {
  // function createDeepSignal<T>(value: T): Signal<T> {
  //   const [store, setStore] = createStore({
  //     value,
  //   });
  //   return [
  //     () => store.value,
  //     (v: T) => {
  //       const unwrapped = unwrap(store.value);
  //       typeof v === "function" && (v = v(unwrapped));
  //       setStore("value", reconcile(v));
  //       return store.value;
  //     },
  //   ] as Signal<T>;
  // }

  const [store, setStore] = createStore(
    {
      categories,
      items
    });
  return (
    <AppContext.Provider value={{ store, setStore }}>
      {props.children}
    </AppContext.Provider>
  );
};

export const useStore = () => {
  const context = useContext(AppContext);
  if (!context) throw new Error("AppContext is not valid");
  return context;
};