|
3 | 3 | <span>A set of <a href="https://react-query.tanstack.com">React Query</a> hooks integrating with <a href="https://firebase.google.com/">Firebase</a>.</span>
|
4 | 4 | </p>
|
5 | 5 | <p align="center">
|
6 |
| - <span><a href="https://react-query-firebase.invertase.dev/">📚 Documentation</a> • <a href="/LICENSE.md">License</a></span> |
| 6 | + <span><a href="#installation">Installation</a> • |
| 7 | + <a href="https://react-query-firebase.invertase.dev/"> Documentation</a> • |
| 8 | + <a href="/LICENSE.md">License</a></span> |
7 | 9 | </p>
|
8 | 10 | <br />
|
9 | 11 |
|
10 |
| -React Query Firebase provides a set of easy to use hooks for handling asynchronous tasks with Firebase in your React application, with |
11 |
| -full TypeScript support. |
| 12 | +React Query Firebase provides a set of easy to use hooks for handling asynchronous tasks with Firebase in your React application. |
| 13 | +## Why should I use React Query Firebase? |
| 14 | + |
| 15 | +- **Backed by [React Query](https://react-query.tanstack.com)** - Unlike other solutions, hooks are built on top of [React Query](https://react-query.tanstack.com) which takes care of complex challenges |
| 16 | +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) |
| 17 | +support out of the box! |
| 18 | +- **Un-opinionated** - You provide the Query Keys, Configuration & Firebase instances which allows you full control over how the data is integrated and cached. You can also roll it alongside any existing Firebase usage. |
| 19 | +- **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 |
| 20 | +[Query Keys](https://react-query.tanstack.com/guides/query-keys), meaning components can share data and queries throughout your application. |
| 21 | +- **Mutations** - Sign a user in, delete a document, run a transaction, log an event... Don't worry about managing your own local state, React Query Firebase takes care of that for you via [Mutations](https://react-query.tanstack.com/guides/mutations). |
| 22 | +- **Fully Typed** - The library is built with and has full compatibility with TypeScript. |
12 | 23 |
|
13 | 24 | > **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)!
|
14 | 25 |
|
15 |
| -Unlike other solutions, hooks are built on top of [React Query](https://react-query.tanstack.com) which takes care of complex challenges |
16 |
| -such as caching, automatic refetching, realtime data subscriptions, pagination & infinite queries, mutations, SSR Support, data selectors, side effect handlers |
17 |
| -and more. |
| 26 | +## Example |
18 | 27 |
|
19 |
| -As an example, let's use a Firestore hook to fetch a document & run a transaction whilst easily handling loading and error state: |
| 28 | +As an example, let's use a Firestore hooks to fetch a document & run a transaction whilst easily handling asynchronous state. |
20 | 29 |
|
21 | 30 | ```tsx
|
22 | 31 | import {
|
|
0 commit comments