Merge pull request #35 from invertase/next

feat: rework realtime subscription hooks

Author: cabljac

.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: '[email protected]',
+  newEmail: "[email protected]",
 });
 ```
 
@@ -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: '[email protected]',
+  newEmail: "[email protected]",
   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.