# @mikelgo/ngx-query-stream

> This package provides a nice way to feetch data from an endpoint and expose certain states like a `isLoading` and `isRefreshing` state.

Latest version **13.0.0** (published 2022-07-29) · 0 weekly downloads

## Install

```sh
npm install @mikelgo/ngx-query-stream
pnpm add @mikelgo/ngx-query-stream
yarn add @mikelgo/ngx-query-stream
bun add @mikelgo/ngx-query-stream
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 13.0.0 |
| Published | 2022-07-29 |
| First published | 2022-07-29 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 16.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | mikelgo |

## Links

- npm: https://www.npmjs.com/package/@mikelgo/ngx-query-stream
- npm.io page: https://npm.io/package/@mikelgo/ngx-query-stream

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Recent versions

- 13.0.0 (latest) — 2022-07-29

## README

# ngx-query-stream

This package provides a nice way to feetch data from an endpoint and 
expose certain states like a `isLoading` and `isRefreshing` state.

While `refreshing` the current values are kept and updated once the 
refresh is done.

## Usage

```typescript
import { queryStream$ } from 'ngx-query-stream';
@Component({
  template: ` <button (click)="refreshCommand$.next(null)">refresh</button>
    <div *ngIf="query$ | async as req">
      <div>isloading {{req!.isLoading!}} isRefreshing {{req!.isRefreshing}} </div>
      <div>values {{req?.value | json}}</div>
    </div>

  `,
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class RxjsCacheComponent implements OnInit {
  private http: HttpClient = inject(HttpClient);
  refreshCommand$ = new Subject();

  query$: Observable<Query<any>> =  query$(this.fetch(10), this.refreshCommand$)

  fetch(count: number) {

    return this.http.get(('https://jsonplaceholder.typicode.com/posts')).pipe(
      delay(500),
      map(x => (x as any[]).slice(0, (Math.random() > 0.5 ? 10 : 20))),
    )

  }
}
```
Note: the example above passes a refreshCommand$, however it is optional but recommended to use.

---
_Source: https://npm.io/package/@mikelgo/ngx-query-stream · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._