Merge pull request #35 from invertase/next

feat: rework realtime subscription hooks

.eslintignore

@@ -1,2 +1,2 @@
 **/dist/**/*.*
-**/coverage/**/*.*
+**/coverage/**/*.*

.opensource/project.json

@@ -5,4 +5,4 @@
   "pages": [],
   "related": ["firebase/firebase-js-sdk", "tannerlinsley/react-query"],
   "tabs": []
-}
+}

.prettierignore

@@ -0,0 +1,7 @@
+**/lib/**
+node_modules
+*.js
+*.json
+*.md
+*.yaml
+coverage

README.md

@@ -10,16 +10,17 @@
 <br />
 
 React Query Firebase provides a set of easy to use hooks for handling asynchronous tasks with Firebase in your React application.
+
 ## Why should I use React Query Firebase?
 
 - **Backed by React Query** - Unlike other solutions, hooks are built on top of [React Query](https://react-query.tanstack.com) which takes care of complex challenges
-such as caching, automatic refetching, realtime data subscriptions, pagination & infinite queries, mutations, SSR Support, data selectors, side effect handlers and more. You also get [DevTool](https://react-query.tanstack.com/devtools)
-support out of the box!
+  such as caching, automatic refetching, realtime data subscriptions, pagination & infinite queries, mutations, SSR Support, data selectors, side effect handlers and more. You also get [DevTool](https://react-query.tanstack.com/devtools)
+  support out of the box!
 - **Un-opinionated** - You provide the Query Keys, Configuration & Firebase instances, allowing for full control over how your data is integrated and cached. You can also roll it alongside any existing Firebase usage.
-- **Performant & Efficient** - Whether your queries are one-off or realtime, the library is designed to be performant and efficient. Data fetching is handled via [Queries](https://react-query.tanstack.com/guides/queries) and 
-[Query Keys](https://react-query.tanstack.com/guides/query-keys), meaning components can share data throughout your application without needless database reads.
-- **Mutations** - Sign a user in, delete a document, run a transaction, log an event...  React Query Firebase takes care of that for you via [Mutations](https://react-query.tanstack.com/guides/mutations), allowing you to focus
-on your application and not managing complex local loading & error states.
+- **Performant & Efficient** - Whether your queries are one-off or realtime, the library is designed to be performant and efficient. Data fetching is handled via [Queries](https://react-query.tanstack.com/guides/queries) and
+  [Query Keys](https://react-query.tanstack.com/guides/query-keys), meaning components can share data throughout your application without needless database reads.
+- **Mutations** - Sign a user in, delete a document, run a transaction, log an event... React Query Firebase takes care of that for you via [Mutations](https://react-query.tanstack.com/guides/mutations), allowing you to focus
+  on your application and not managing complex local loading & error states.
 - **Fully Typed** - The library is built with and has full compatibility with TypeScript.
 
 > **Note**: The library supports the Firebase JS SDK v9 - [learn more about it here](https://firebase.googleblog.com/2021/08/the-new-firebase-js-sdk-now-ga.html)!

docs/analytics/typescript.mdx

@@ -5,7 +5,7 @@ description: Hooks for integrating with Firebase Analytics.
 
 # TypeScript
 
-The library exposes the various type interfaces for logging events to Analytics. 
+The library exposes the various type interfaces for logging events to Analytics.
 The interface map below outlines the various event names and their interfaces:
 
 ```ts
@@ -41,6 +41,6 @@ mutation.mutate({
   params: {
     firebase_screen: "Search",
     firebase_screen_class: "SearchPage",
-  }
-})
-```
+  },
+});
+```

docs/auth/actions.mdx

@@ -487,7 +487,7 @@ const mutation = useAuthUnlink();
 
 mutation.mutate({
   user: auth.currentUser,
-  providerId: 'google.com',
+  providerId: "google.com",
 });
 ```
 
@@ -515,7 +515,7 @@ const mutation = useAuthUpdateEmail();
 
 mutation.mutate({
   user: auth.currentUser,
-  newEmail: 'bar@foo.com',
+  newEmail: "bar@foo.com",
 });
 ```
 
@@ -530,7 +530,7 @@ const mutation = useAuthUpdatePassword();
 
 mutation.mutate({
   user: auth.currentUser,
-  newPassword: '...',
+  newPassword: "...",
 });
 ```
 
@@ -561,8 +561,8 @@ const mutation = useAuthUpdateProfile();
 
 mutation.mutate({
   user: auth.currentUser,
-  displayName: '...', // optional
-  photoURL: 'https://...', // optional
+  displayName: "...", // optional
+  photoURL: "https://...", // optional
 });
 ```
 
@@ -577,7 +577,7 @@ const mutation = useAuthVerifyBeforeUpdateEmail();
 
 mutation.mutate({
   user: auth.currentUser,
-  newEmail: 'bar@foo.com',
+  newEmail: "bar@foo.com",
   actionCodeSettings: {}, // optional
 });
 ```
@@ -591,6 +591,5 @@ Checks a password reset code sent to the user by email or other out-of-band mech
 ```js
 const mutation = useAuthVerifyPasswordResetCode(auth);
 
-mutation.mutate('oobCode');
+mutation.mutate("oobCode");
 ```
-

docs/auth/auth-state.mdx

@@ -35,7 +35,7 @@ function App() {
 ```
 
 Anytime your users state changes, the hooks data will be updated allowing you to reactively handle updates
-within your application. If the user is authenticated, the hook returns the 
+within your application. If the user is authenticated, the hook returns the
 [`User`](https://firebase.google.com/docs/reference/js/auth.user) interface, otherwise it's `null`.
 
 ## Sharing a Query Key
@@ -86,13 +86,11 @@ side effects with ease:
 const user = useAuthUser(["user"], auth, {
   onSuccess(user) {
     if (user) {
-      console.log('User is authenticated!', user);
+      console.log("User is authenticated!", user);
     }
   },
   onError(error) {
-    console.error('Failed to subscribe to users authentication state!');
-  }
+    console.error("Failed to subscribe to users authentication state!");
+  },
 });
 ```
-
-

docs/auth/id-token.mdx

@@ -86,7 +86,7 @@ useAuthIdToken(["token"], auth, {
     if (result) {
       return result.token;
     } else {
-      return '';
+      return "";
     }
   },
 });

docs/auth/index.mdx

@@ -5,7 +5,7 @@ description: Hooks for integrating with Authentication.
 
 # Authentication
 
-The `@react-query-firebase/auth` package provides hooks subscribing to a authentication state and triggering 
+The `@react-query-firebase/auth` package provides hooks subscribing to a authentication state and triggering
 authentication requests.
 
 ## Installation

docs/comparison.mdx

@@ -12,7 +12,7 @@ and stale data with zero configuration. It also provides tools such as DevTools,
 
 Alongside this, React Query Firebase is unopinionated when it comes to integrating with both Firebase and React Query. You can use the library alongside
 your existing Firebase or React Query code with zero conflict. You provide the [Query Keys](https://react-query.tanstack.com/guides/query-keys) and a
-Firebase instance and the library does the rest. Each hook allows you to also provide React Query hook options, which opens the door to making integration 
+Firebase instance and the library does the rest. Each hook allows you to also provide React Query hook options, which opens the door to making integration
 with the rest of your application super powerful.
 
 Since we've also got access to the awesome [`useMutation`](https://react-query.tanstack.com/reference/useMutation) hook, it means the library provides super useful
@@ -44,5 +44,5 @@ return (
 );
 ```
 
-In this simple example, we've got success and error callback handlers alongside reactive updates within our application, with zero custom local 
+In this simple example, we've got success and error callback handlers alongside reactive updates within our application, with zero custom local
 state management. By integrating with React Query, it allows us to build complex logic flows with minimal effort.

docs/database/querying.mdx

@@ -220,4 +220,4 @@ if (query.isError) {
 if (query.isSuccess) {
   return <ProductList data={query.data} />;
 }
-```
+```

docs/examples/auth-basic.mdx

@@ -10,16 +10,16 @@ sign-in and sign-out.
 
 > [View example code.](https://github.com/invertase/react-query-firebase/tree/main/examples/auth-basic)
 
-export const iframe = () => <iframe/>;
+export const iframe = () => <iframe />;
 
 <iframe
   src="https://codesandbox.io/embed/github/invertase/react-query-firebase/tree/main/examples/auth-basic?fontsize=14&hidenavigation=1&theme=dark"
   style={{
-    width: '100%',
-    height: '700px',
-    border: '0',
-    borderRadius: '4px',
-    overflow: 'hidden',
+    width: "100%",
+    height: "700px",
+    border: "0",
+    borderRadius: "4px",
+    overflow: "hidden",
   }}
   title="invertase/react-query-firebase: auth-basic"
   allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"

docs/examples/functions-basic.mdx

@@ -10,7 +10,7 @@ This example loads a joke from a deployed [callable HTTPS function](https://gith
 
 > [View example code.](https://github.com/invertase/react-query-firebase/tree/main/examples/functions-basic)
 
-export const iframe = () => <iframe/>;
+export const iframe = () => <iframe />;
 
 <iframe
   src="https://codesandbox.io/embed/github/invertase/react-query-firebase/tree/main/examples/functions-basic?fontsize=14&hidenavigation=1&theme=dark"

docs/firestore/prefetching.mdx

@@ -37,4 +37,4 @@ function Products() {
 In the above example, the data for the Query Key is prefetched on the server, and queried on the client.
 However, instead of the hook state initially being `loading`, the data will be immidiatley available on the client.
 
-Make sure your server query and client query return the same data model.
+Make sure your server query and client query return the same data model.

docs/firestore/querying-documents.mdx

@@ -45,7 +45,7 @@ import {
 import { firestore } from "../firebase";
 
 function Product({ id }) {
-  const ref = doc(firestore, 'products', id);
+  const ref = doc(firestore, "products", id);
 
   const product = useFirestoreDocument(["products", id], ref);
 

docs/firestore/typescript.mdx

@@ -5,12 +5,12 @@ description: TypeScript usage with React Query Firebase.
 
 # Typescript
 
-The library comes with support for a full typesafe API. 
+The library comes with support for a full typesafe API.
 
 ## Response types
 
-When fetching a or modifying documents the default return type from 
-Firestore is a [`QuerySnapshot`](https://firebase.google.com/docs/reference/js/firestore_.querysnapshot) or 
+When fetching a or modifying documents the default return type from
+Firestore is a [`QuerySnapshot`](https://firebase.google.com/docs/reference/js/firestore_.querysnapshot) or
 [`DocumentSnapshot`](https://firebase.google.com/docs/reference/js/firestore_.documentsnapshot) whose data type is
 [`DocumentData`](https://firebase.google.com/docs/reference/js/firestore_.documentdata).
 
@@ -36,7 +36,7 @@ useFirestoreDocumentData<Product>(); // Product | null
 
 ### Inferred types
 
-The hooks will inferr any types from the provided reference, for example you could 
+The hooks will inferr any types from the provided reference, for example you could
 define [Firestore converters](https://firebase.google.com/docs/reference/js/firestore_.firestoredataconverter):
 
 ```ts
@@ -58,28 +58,28 @@ useFirestoreDocumentData('...', docRef); // Product | null
 
 ## Data modifications
 
-When returning modified data, you can pass a second type to the hooks for 
+When returning modified data, you can pass a second type to the hooks for
 typesafe result data.
 
 ```ts
 type Product = {
   name: string;
   price: number;
-}
+};
 
-const query = useFirestoreQuery<Product, number | null>('...', ref, undefined, {
+const query = useFirestoreQuery<Product, number | null>("...", ref, undefined, {
   select(snapshot: QuerySnapshot<Product>): number | null {
     if (!snapshot.exists()) {
       return null;
     }
 
     return snapshot.data().price;
-  }
+  },
 });
 
 if (query.isSuccess) {
   const price = query.data; // number | null
-} 
+}
 ```
 
 ## Mutations
@@ -113,7 +113,7 @@ const mutation = useFirestoreCollectionMutation<Product>(ref);
 
 // mutate expects a Product
 mutation.mutate({
-  name: 'New product',
+  name: "New product",
   price: 10,
 });
 ```
@@ -122,7 +122,7 @@ If working with transactions, you can provide a custom type as the expected
 response of the transaction:
 
 ```ts
-const ref = collection(firebase, 'posts').doc('123');
+const ref = collection(firebase, "posts").doc("123");
 
 const mutation = useFirestoreTransaction<number>(firestore, async (tsx) => {
   const post = await tsx.get(ref);
@@ -135,6 +135,6 @@ const mutation = useFirestoreTransaction<number>(firestore, async (tsx) => {
 });
 
 if (mutation.isSuccess) {
-  console.log('New likes: ', mutation.data);
+  console.log("New likes: ", mutation.data);
 }
-```
+```

docs/functions/typescript.mdx

@@ -100,8 +100,8 @@ const mutation = useFunctionsCall<RequestData, ResponseData>(
 
 // mutate call is now typed to RequestData
 mutation.mutate({
-  id: '...',
-  name: '...',
+  id: "...",
+  name: "...",
 });
 
 if (mutation.isSuccess) {

examples/auth-basic/package.json

@@ -6,12 +6,12 @@
   "keywords": [],
   "main": "src/index.tsx",
   "dependencies": {
-    "@react-query-firebase/auth": "^0.2.0",
+    "@react-query-firebase/auth": "*",
     "firebase": "^9.1.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-query": "3.19.0",
-    "react-scripts": "4.0.0"
+    "react-query": "^3.23.2",
+    "react-scripts": "5.0.0"
   },
   "devDependencies": {
     "@types/react": "17.0.0",