Revamp

.github/workflows/testing.yaml

@@ -17,7 +17,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v1
         with:
-          node-version: 16
+          node-version: 20
       - name: Yarn install
         run: yarn
       - name: ESLint
@@ -31,7 +31,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v1
         with:
-          node-version: 16
+          node-version: 20
       - name: Yarn install
         run: yarn
       - name: Yarn install (functions)

docs/database/querying.mdx

@@ -53,7 +53,7 @@ function ProductsList() {
   // Iterate the values in order and add an element to the array
   snapshot.forEach((childSnapshot) => {
     children.push(
-      <div key={childSnapshot.key}>Product: {childSnapshot.val().name}</div>
+      <div key={childSnapshot.key}>Product: {childSnapshot.val().name}</div>,
     );
   });
 
@@ -210,7 +210,7 @@ const products = useDatabaseSnapshot(
     onError(error) {
       toast.error("Woops, something went wrong!");
     },
-  }
+  },
 );
 
 if (query.isError) {

docs/firestore/data-mutation.mdx

@@ -233,6 +233,6 @@ mutation.mutate(
     onMutate() {
       toast.info("Adding document...");
     },
-  }
+  },
 );
 ```

docs/firestore/querying-collections.mdx

@@ -35,7 +35,7 @@ import { firestore } from "./firebase";
 const ref = query(
   collection(firestore, "products"),
   limit(10),
-  where("state", "==", "active")
+  where("state", "==", "active"),
 );
 ```
 
@@ -226,7 +226,7 @@ function Products() {
   const query = useFirestoreQuery(
     ["products"],
     firestore,
-    namedQuery(firestore, "products")
+    namedQuery(firestore, "products"),
   );
 }
 ```
@@ -303,7 +303,7 @@ const query = useFirestoreQuery(
     select(snapshot) {
       return snapshot.docs.map((docSnapshot) => docSnapshot.id);
     },
-  }
+  },
 );
 
 const data = query.data; // ['id1', 'id2', ...]
@@ -317,7 +317,7 @@ const findActiveSubscription = query(
   collection(firestore, "subscriptions"),
   where("uid", "==", "123"),
   where("status", "==", "active"),
-  limit(1)
+  limit(1),
 );
 
 // Override the return type generic:
@@ -335,7 +335,7 @@ const query = useFirestoreQuery(
 
       return snapshot.docs[0];
     },
-  }
+  },
 );
 
 // Data will contain a single document or null.
@@ -390,7 +390,7 @@ const query = useFirestoreQuery(
     onError(error) {
       toast.error("Woops, something went wrong!");
     },
-  }
+  },
 );
 
 if (query.isError) {

docs/firestore/querying-documents.mdx

@@ -184,7 +184,7 @@ const query = useFirestoreDocument(
     select(snapshot) {
       return snapshot.exists() ? snapshot.data().name : null;
     },
-  }
+  },
 );
 
 const data = query.data; // string | null
@@ -214,7 +214,7 @@ const query = useFirestoreDocument(
     onError(error) {
       toast.error("Woops, something went wrong!");
     },
-  }
+  },
 );
 
 if (query.isError) {

docs/functions/calling.mdx

@@ -69,6 +69,6 @@ const mutation = useFunctionsCall(
     onMutate(variables) {
       console.log("Updating product with variables", variables);
     },
-  }
+  },
 );
 ```

docs/functions/querying.mdx

@@ -49,7 +49,7 @@ const query = useFunctionsQuery(
   },
   {
     timeout: 10000,
-  }
+  },
 );
 ```
 
@@ -76,6 +76,6 @@ const query = useFunctionsQuery(
     onError(error) {
       console.error("Error fetching the product!", error);
     },
-  }
+  },
 );
 ```

docs/functions/typescript.mdx

@@ -31,7 +31,7 @@ const query = useFunctionsQuery<RequestData, ResponseData>(
   // RequestData
   {
     id,
-  }
+  },
 );
 
 if (query.isSuccess) {
@@ -68,7 +68,7 @@ const query = useFunctionsQuery<RequestData, ResponseData, string>(
     select(response: ResponseData): string {
       return response.data.name;
     },
-  }
+  },
 );
 
 if (query.isSuccess) {
@@ -95,7 +95,7 @@ type ResponseData = {
 
 const mutation = useFunctionsCall<RequestData, ResponseData>(
   functions,
-  "updateProduct"
+  "updateProduct",
 );
 
 // mutate call is now typed to RequestData

examples/auth-basic/.env.local.example

@@ -0,0 +1,6 @@
+VITE_FIREBASE_API_KEY="YOUR_FIREBASE_API_KEY"
+VITE_FIREBASE_AUTH_DOMAIN="YOUR_FIREBASE_AUTH_DOMAIN"
+VITE_FIREBASE_PROJECT_ID="YOUR_FIREBASE_PROJECT_ID"
+VITE_FIREBASE_STORAGE_BUCKET="YOUR_FIREBASE_STORAGE_BUCKET"
+VITE_FIREBASE_MESSAGING_SENDER_ID="YOUR_FIREBASE_MESSAGING_SENDER_ID"
+VITE_FIREBASE_APP_ID="YOUR_FIREBASE_APP_ID"

examples/auth-basic/.gitignore

@@ -0,0 +1,29 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env
+yarn.lock
+package-lock.json
+pnpm-lock.yaml
+.env.local

examples/auth-basic/README.md

@@ -1,6 +1,32 @@
-# Example
+# React Query Firebase Example
 
-To run this example:
+This is an example usage of the `react-query-firebase` library.
+
+_See also: [the React Query Firebase documentation](https://react-query-firebase.invertase.dev/)_
+
+
+## Getting Started
+Below is a guide on how to get started with running this example;
+
+### 1. Add environment variables
+
+- Create a `.env` or `.env.local` file.
+- Add your Firebase environment variables to the you created.   
+
+The environment variables to add include;
+
+```bash
+VITE_FIREBASE_API_KEY="YOUR_FIREBASE_API_KEY"
+VITE_FIREBASE_AUTH_DOMAIN="YOUR_FIREBASE_AUTH_DOMAIN"
+VITE_FIREBASE_PROJECT_ID="YOUR_FIREBASE_PROJECT_ID"
+VITE_FIREBASE_STORAGE_BUCKET="YOUR_FIREBASE_STORAGE_BUCKET"
+VITE_FIREBASE_MESSAGING_SENDER_ID="YOUR_FIREBASE_MESSAGING_SENDER_ID"
+VITE_FIREBASE_APP_ID="YOUR_FIREBASE_APP_ID"
+```
+
+## 2. Running the app
+
+Execute the commands below;
 
 - `npm install` or `yarn`
-- `npm run start` or `yarn start`
+- `npm run dev` or `yarn dev`

examples/auth-basic/eslint.config.js

@@ -0,0 +1,26 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config({
+  extends: [js.configs.recommended, ...tseslint.configs.recommended],
+  files: ['**/*.{ts,tsx}'],
+  ignores: ['dist'],
+  languageOptions: {
+    ecmaVersion: 2020,
+    globals: globals.browser,
+  },
+  plugins: {
+    'react-hooks': reactHooks,
+    'react-refresh': reactRefresh,
+  },
+  rules: {
+    ...reactHooks.configs.recommended.rules,
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+})

examples/auth-basic/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

examples/auth-basic/package.json

@@ -1,33 +1,32 @@
 {
   "name": "auth-basic",
   "private": true,
-  "version": "1.0.0",
-  "description": "",
-  "keywords": [],
-  "main": "src/index.tsx",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
   "dependencies": {
-    "@react-query-firebase/auth": "*",
-    "firebase": "^9.1.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-query": "^3.23.2",
-    "react-scripts": "5.0.0"
+    "@tanstack/react-query": "^5.51.21",
+    "@tanstack/react-query-devtools": "^5.51.21",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@react-query-firebase/auth": "*"
   },
   "devDependencies": {
-    "@types/react": "17.0.0",
-    "@types/react-dom": "17.0.0",
-    "typescript": "4.1.3"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
+    "@eslint/js": "^9.8.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^9.8.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "globals": "^15.9.0",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.0",
+    "vite": "^5.4.0"
+  }
 }