Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: ✏️ Minor documentation fixes and improvements #61

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 26 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,28 +63,23 @@ all while facilitating **real-time data exchange**.

## Key Features

🔮 **Simple setup** - [Read more](https://hyperfetch.bettertyped.com/docs/guides/basic/setup)
🔮 [Simple setup](https://hyperfetch.bettertyped.com/docs/guides/basic/setup)

🎯 **Easy cancellation** - [Read more](https://hyperfetch.bettertyped.com/docs/guides/Advanced/Cancellation)
🎯 [Easy cancellation](https://hyperfetch.bettertyped.com/docs/guides/Advanced/Cancellation)

✨ **Deduplicate similar requests** -
[Read more](https://hyperfetch.bettertyped.com/docs/guides/advanced/deduplication/)
✨ [Request deduplication](https://hyperfetch.bettertyped.com/docs/guides/advanced/deduplication/)

🚀 **Queueing** - [Read more](https://hyperfetch.bettertyped.com/docs/guides/advanced/queueing)
🚀 [Queueing](https://hyperfetch.bettertyped.com/docs/guides/advanced/queueing)

💎 **Response Caching** - [Read more](https://hyperfetch.bettertyped.com/docs/documentation/core/cache)
💎 [Response Caching](https://hyperfetch.bettertyped.com/docs/documentation/core/cache)

🔋 **Offline First** - [Read more](https://hyperfetch.bettertyped.com/docs/guides/advanced/offline)
🔋 [Offline First](https://hyperfetch.bettertyped.com/docs/guides/advanced/offline)

📡 **Built-in fetcher** - [Read more](https://hyperfetch.bettertyped.com/docs/documentation/core/adapter)
📡 [Built-in fetcher](https://hyperfetch.bettertyped.com/docs/documentation/core/adapter)

🎟 **Authentication** - [Read more](https://hyperfetch.bettertyped.com/docs/guides/basic/authentication)
🎟 [Authentication](https://hyperfetch.bettertyped.com/docs/guides/basic/authentication)

🔁 **Smart Retries** - [Read more](https://hyperfetch.bettertyped.com/docs/guides/basic/retries/)

## Help me keep working on this project ❤️

- [Become a Sponsor on GitHub](https://github.com/sponsors/prc5)
🔁 [Smart Retries](https://hyperfetch.bettertyped.com/docs/guides/basic/retries/)

## Installation

Expand Down Expand Up @@ -268,6 +263,23 @@ yarn add @hyper-fetch/core @hyper-fetch/react
</a>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/BetterTyped/hyper-fetch/tree/main/packages/codegen-openapi" >Codegen Openapi</a>
</td>
<td>
<a href="https://www.npmjs.com/package/@hyper-fetch/codegen-openapi">
<img src="https://custom-icon-badges.demolab.com/npm/dm/@hyper-fetch/codegen-openapi?logoColor=fff&logo=trending-up" />
</a>
<a href="https://www.npmjs.com/package/@hyper-fetch/codegen-openapi">
<img src="https://custom-icon-badges.demolab.com/npm/v/@hyper-fetch/codegen-openapi.svg?logo=npm"/>
</a>
<a href="https://www.npmjs.com/package/@hyper-fetch/codegen-openapi">
<img src="https://custom-icon-badges.demolab.com/bundlephobia/minzip/@hyper-fetch/codegen-openapi?color=E10098&logo=package" />
</a>
</td>
</tr>

</tbody>
</table>

Expand Down
8 changes: 8 additions & 0 deletions documentation/docs/documentation/02-core/adapter.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -61,3 +61,11 @@ will use the node http module.
- [Custom adapter](/guides/02-advanced/custom-adapter.mdx)

---

## Available adapters

Hyper Fetch offers a few custom, tailor-made adapters:

- [Axios adapter](/documentation/05-adapters/axios/01-introduction.mdx)
- [Firebase adapter](/documentation/05-adapters/firebase/01-introduction.mdx)
- [GraphQL adapter](/documentation/05-adapters/graphql/01-introduction.mdx)
18 changes: 9 additions & 9 deletions documentation/docs/documentation/02-core/mocker.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -47,17 +47,17 @@ The `setMock` method accepts the `config` object, which allows for tweaking our
});

```
- `timeout` - **boolean** - informs whether it should return a timeout error.
- `requestTime` - Simulates how long the request to the server should take (in milliseconds).
- `responseTime` - Indicates how long the response from the server should take (in milliseconds).
If their combined total takes longer than provided timeout, each value will be automatically adjusted to last half of the timeout time.
- `totalUploaded` - total number of 'kilobytes' to be uploaded.
- `totalDownloaded` - total number of 'kilobytes' to be downloaded.
- `timeout` - **boolean** - Indicates whether it should return a timeout error.
`requestTime` - Indicates how long the request to the server should take (in milliseconds).
`responseTime` - Indicates how long the response from the server should take (in milliseconds).
- `totalUploaded` - The total number of kilobytes to be uploaded.
- `totalDownloaded` - The total number of kilobytes to be downloaded.

In the example above - the request phase will take 40 milliseconds and during this phase 1000 'kilobytes' will be uploaded (and `onUploadProgress` events will be emitted).
The response phase will take 60 millisecond and during this phase 1000 'kilobytes' will be downloaded (and `onDownloadProgress` events will be emitted).
The word `kilobytes` is written in quotation marks as no real data exchange occurs - it is simply to mock events and allow for data stream mocking.
In the example above, the request phase will take 40 milliseconds. During this phase, 1,000 'kilobytes' will be uploaded and `onUploadProgress` events will be emitted.

The response phase will take 60 milliseconds During this phase, 1,000 'kilobytes' will be downloaded and `onDownloadProgress` events will be emitted.

Note: The word 'kilobytes' is written in quotation marks as no real data exchange occurs – it simply simulates events and allows for data stream mocking.

## Usage and use cases

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const { emit, timestamp, connected, onEvent, onError, onReconnecting } = useEmit

## How it works?

**`useEmitter`** executes a Emitter when a `emit()` function returned from it gets triggered. It uses dependency
**`useEmitter`** executes an `Emitter` when a `emit()` function returned from it gets triggered. It uses dependency
tracking to limit re-rendering and improve performance. Under the hood, communication with the core systems is
established by event emitters. Many `"helper hooks"` (such as `onEvent`, `onError`, `onReconnecting`, etc.) are
returned; these will help handle the request flow and lifecycle. This approach avoids overloading the base hook with
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,11 @@ sidebar_label: Introduction
---

Hyper Fetch `firebase` packages offer complete integration of `realtime database` and `firestore`, both for frontend and
backend, with a single, unified approach for all of them.
backend. We offer a single, unified approach for all of them.

## Getting Started

In order to start using the firebase adapter, you have to initialize the firestore/realtime database and set the correct
adapter on the `client`.
To start using the Firebase adapter, you have to initialize the Firestore/Realtime database and set the correct adapter on the `client`.

There are two packages to chose from with two adapters each:

Expand Down Expand Up @@ -52,26 +51,24 @@ import { firebaseAdminAdapter } from "@hyper-fetch/firebase-admin";
...
```

Resulting `response` is an object that contains the following properties:
The resulting `response` is an object that contains the following properties:

1. `data` - data returned from the database. Each object returned from the database is enhanced also by the `__key` param that equals id of a given document.
2. `status` - status indicating whether a request ended with `success`, `error` or `emptyResource`. `emptyResource`
occurs when the request to firebase succeeded but no data was returned.
3. `success` - general information if overall request succeeded (`true`) or failed (`false`)
4. `error` - contains error object if the request failed.
5. `extra` - contains additional properties, depending on a method used. For instance, for `getDocs` method - it allows
to access `ref` and `snapshot` from firestore firebase.
1. `data` - The data returned from the database. Each object returned from the database is also enhanced by the `__key` param that equals the id of a given document.
2. `status` - Indicates whether a request ended with `success`, `error`, or `emptyResource`. An `emptyResource` occurs when the request to the Firebase succeeded but no data was returned.
3. `success` - Indicates if the overall request succeeded (`true`) or failed (`false`).
4. `error` - Contains an error object if the request failed.
5. `extra` - Contains additional properties, depending on the method used. E.g. for the `getDocs` method, this allows access to `ref` and `snapshot` from the Firestore Firebase.

## Differences from 'raw' firebase

1. If we store an array in firebase, for instance `[a, b, c]`, the query would return the same array. However, if the
array stops being sequential - for instance, if `a` and `b` were deleted, firebase would return and object: {2: 'c',
4: 'e'}. Hyper Fetch always returns and array. Each object in an array has an additional `__key` property, that indicates the id of a given object.
1. If we store an array in Firebase (e.g.`[a, b, c]`), the query will return the same array.
However, if the array stops being sequential – if `a` and `b` were deleted from our example – Firebase would return an object.
In this example, it would be `{2: 'c', 4: 'e'}`. Hyper Fetch always returns an array.
Each object in an array has an additional `__key` property, that indicates the id of a given object.

## Filtering queries

In order to standardize the interface across both admin/web firestore/realtime, the filtering and limiting queries is
done via setting the `constraints` queryParam:
In order to standardize the interface across admin, web Firestore, and Realtime database, queries are filtered and limited by setting the `constraints` queryParam:

```tsx
import { $limit, $orderBy, $where } from "constraints";
Expand All @@ -85,7 +82,19 @@ const { data } = await req.send({
});
```

User can pass the array of constrains and filters. Please pay attention to the fact that you need to filter via method
wrappers provided via `adapter-firebase` package: `$where`, `$orderBy`, `$limit`, `$startAt`, `$startAfter`, `$endAt`,
`$endAfter`, `$orderByChild`, `$orderByKey`, `$orderByValue`, `$limitToFirst`, `$limitToLast`, `$equalTo`. All of these
methods work exactly the same as their corresponding firebase equivalents.
Users can pass the array of constraints and filters. Please pay attention to the fact that you need to filter using the method wrappers provided via the `adapter-firebase` package:
- `$where`
- `$orderBy`
- `$limit`
- `$startAt`
- `$startAfter`
- `$endAt`
- `$endAfter`
- `$orderByChild`
- `$orderByKey`
- `$orderByValue`
- `$limitToFirst`
- `$limitToLast`
- `$equalTo`
All of these methods work exactly the same as their Firebase equivalents.

Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ title: Working with Firestore
sidebar_label: Firestore
---

## Available methods
## Available Firestore methods

After setting the firestore adapter, we can start performing requests! We should select the appropriate method, corresponding with
firebase methods. If you want to learn more about available methods - please refer to the firebase documentation.
After setting the Firestore adapter, we can start performing requests. We should select the appropriate method that corresponds with the Firebase method.
If you want to learn more about available methods, please refer to the Firebase documentation.

Due to its nature, we've solved the realtime listening a bit differently, and thus - this method is not allowed in a standard adapter.
For the `onSnapshot`-like usage, please check how to **[listen to queries](/docs/documentation/adapters/firebase/realtime-queries)**.
Due to its nature, we've solved the realtime listening a bit differently. Thus, this method is not allowed in a standard adapter.
For `onSnapshot`-like usage, please see how to **[listen to queries](/docs/documentation/adapters/firebase/realtime-queries)**.

```tsx
const getReq = client.createRequest<Tea[]>()({
Expand All @@ -33,8 +33,8 @@ const { data, status, extra, success, error } = await req.send();
```

`extra`:
1. `ref` - collection reference endpoint
2. `snapshot` - 'raw' `getDocs` firestore collection/query reference snapshot
1. `ref` - Collection reference endpoint.
2. `snapshot` - Raw `getDocs` Firestore collection/query reference snapshot.

### getDoc

Expand All @@ -51,8 +51,8 @@ const { data, status, extra, success, error } = await req.send();
```

`extra`:
1. `ref` - document reference endpoint
2. `snapshot` - 'raw' firestore document reference snapshot
1. `ref` - Document reference endpoint.
2. `snapshot` - Raw Firestore document reference snapshot.

### setDoc

Expand All @@ -71,7 +71,7 @@ await setReq.send();
const { data } = await getReq.send();
```

In case of `setDoc` - data returned is the same data as passed for setting.
In `setDoc`, the returned data is the same as the data passed for setting.

### addDoc

Expand All @@ -87,7 +87,7 @@ const addDocReq = client
await addDocReq.send()
```

In case of `addDoc` - data returned is the same as passed data for setting + the `__key` param that is id of a newly created document.
In `addDoc`, the returned data is the same as the data passed for setting plus the `__key` param that is id of a newly created document.

### deleteDoc

Expand All @@ -102,4 +102,4 @@ const deleteDocReq = client
await deleteDocReq
```

In case of `deleteDoc` - returned data equals `null`
In `deleteDoc`, the returned data equals `null`.
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@ title: Working with Realtime database
sidebar_label: Realtime Database
---

## Available methods
## Available Realtime Database Methods

Our Realtime Database adapter provides all the methods the original offers. Due to its nature, we've solved the realtime listening a bit differently, and thus - this method is not allowed in standard adapter.
For the `onValue`-like usage, please check how to **[listen to queries](/docs/documentation/adapters/firebase/realtime-queries)**.
Our Realtime Database adapter provides all the methods available for Realtime Database.
However, due to its nature, we've solved the realtime listening a bit differently. Thus, this method is not allowed in a standard adapter.
For `onValue`-like usage, please see how to **[listen to queries](/docs/documentation/adapters/firebase/realtime-queries)**.

### get

Expand All @@ -24,8 +25,8 @@ const { data, status, extra, success, error } = await req.send();
```

`extra`:
1. `ref` - reference to the endpoint
2. `snapshot` - 'raw' snapshot from the result
1. `ref` - A reference to the endpoint.
2. `snapshot` - A 'raw' snapshot from the result.

### set

Expand All @@ -41,10 +42,10 @@ const setReq = client
const { data, status, extra, success, error } = await req.send();
```

In case of `set` - data returned is the same data as passed for setting.
In `set`, the returned data is the same as the data passed for setting.

`extra`:
1. ref - database reference to the path
1. ref - The database reference to the path.

You can also **remove data** via set by sending the `{data: null}` object:
```tsx
Expand All @@ -68,11 +69,11 @@ const pushReq = client
.setData(newData);
```

In case of `push` - data returned is the same data as passed for setting + the `__key` param that equals id of a newly created document.
In `push`, the returned data is the same as the data passed for setting plus the `__key` param that equals id of a newly created document.

`extra`:
1. ref - database reference to the path
2. key - key of the newly created resource
1. ref - The database reference to the path.
2. key - The key of the newly created resource.

### update

Expand All @@ -85,10 +86,10 @@ const updateReq = client
.setData(newData);
```

In case of `update` - data returned is the same data as passed for setting.
In `update`, the returned data is the same as the data passed for setting.

`extra`:
1. ref - database reference to the path
1. ref - The database reference to the path.

### remove

Expand Down
Loading
Loading