https://github.com/k3nsei/ngx-signal-store-query

Signal Store feature that bridges with Angular Query
https://github.com/k3nsei/ngx-signal-store-query

angular angular-query signal-store signal-store-feature signals state-management

Last synced: about 2 months ago
JSON representation

Signal Store feature that bridges with Angular Query

• Host: GitHub
• URL: https://github.com/k3nsei/ngx-signal-store-query
• Owner: k3nsei
• License: mit
• Created: 2024-08-11T18:14:53.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-08-24T09:33:53.000Z (3 months ago)
• Last Synced: 2024-08-24T10:35:12.229Z (3 months ago)
• Topics: angular, angular-query, signal-store, signal-store-feature, signals, state-management
• Language: TypeScript
• Homepage:
• Size: 270 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-angular - ngx-signal-store-query - Signal Store feature that bridges with [Angular Query](https://tanstack.com/query/latest/docs/framework/angular/overview). (Table of contents / Third Party Components)
• fucking-awesome-angular - ngx-signal-store-query - Signal Store feature that bridges with 🌎 [Angular Query](tanstack.com/query/latest/docs/framework/angular/overview). (Table of contents / Third Party Components)

README

        
# ngx-signal-store-query

Signal Store feature that bridges with Angular Query

## Simple Example

#### Create Store

```typescript

import { signalStore, withState } from '@ngrx/signals';

import { withQuery } from '@ngx-signal-store-query/core';

import { lastValueFrom } from 'rxjs';

import { ApiService } from './api.service';

export const ExampleStore = signalStore(

  withState({ categoryId: 1 }),

  withQuery('example', (store) => {

    const apiService = inject(ApiService);

    return () => {

      const categoryId = store.categoryId();

      return {

        enabled: !!categoryId,

        queryKey: ['category', { id: categoryId }],

        queryFn: () =>

          lastValueFrom(apiService.getCategory$(categoryId)).catch((error) => {

            console.error(error);

            return null;

          }),

      };

    };

  }),

);

```

#### Use it in component

```typescript

import { JsonPipe } from '@angular/common';

import { ChangeDetectionStrategy, Component, inject } from '@angular/core';

import { ExampleStore } from './example.store.ts';

@Component({

  standalone: true,

  selector: 'app-example',

  template: `

    

      Loading: {{ store.exampleQuery.isLoading() }}

      Fetching: {{ store.exampleQuery.isFetching() }}

      Data:

      {{ store.exampleQuery.data() | json }}

    

  `,

  changeDetection: ChangeDetectionStrategy.OnPush,

  imports: [JsonPipe],

})

export class ExampleComponent {

  public readonly store = inject(ExampleStore);

}

```