Usage

npm i fire-query-aria

yarn add fire-query-aria

Here is a quick example to get you started, it's all you need:

// firebase/index.ts   : init config firebase
import firebase from "firebase/app";

const firebaseConfig = {
  apiKey: ----------------------------------------,
  authDomain: --------------------------------,
  projectId: ---------------,
  storageBucket: ---------------------------,
  messagingSenderId: ---------------,
  appId: -----------------------------------------------,
  measurementId: ----------------
};


// App.ts  : import firebase pass to FireQuery
import firebase from "./firebase";
import FireQueryProvider from "fire-query-aria";
import Start from "./Start";

export default function App() {
  return (
    <>
      <FireQueryProvider devtools={true} firebase={firebase}>
        <Start />
      </FireQueryProvider>
    </>
  );
}

firebase.initializeApp(firebaseConfig);

export default firebase;


// Start.ts   : use hooks any where

import React, { useState } from "react";
import { useFireQuery } from "fire-query-aria";
import { useFireQueryData } from "fire-query-aria";
import { useFireMutation } from "fire-query-aria";
import { useFireStorage } from "fire-query-aria";

export default function Start() {
  const {
    loading,
    data,
    error,
    refetch,
    firstSnapDoc,
    lastSnapDoc
  } = useFireQuery(
    "cities",
    {
      query: [
        ["capital ==", true],
        ["population <", 1000000]
      ],
      orderBy: "name",
      limit: 3
    },
    true
  );

  const {
    url,
    loading: loadingPic,
    progress,
    error: picError,
    upload,
    success: successDelImage,
    deleteFile,
    deleteDir
  } = useFireStorage("avatar_6.png");

  const {
    loading: loadingMutation,
    success,
    error: mutationError,
    mutate
  } = useFireMutation("cities");

  return (
    <>
    ...
    </>
  )

}

See Demo:

🤔 Wana make it awesome, contribute, create an issue and more are welcome.