Socket
Socket
Sign inDemoInstall

@tanstack/angular-query-experimental

Package Overview
Dependencies
6
Maintainers
2
Versions
69
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @tanstack/angular-query-experimental

Signals for managing, caching and syncing asynchronous and remote data in Angular


Version published
Weekly downloads
3.6K
increased by10.28%
Maintainers
2
Created
Weekly downloads
 

Readme

Source

TanStack Query Header

npm version npm license bundle size npm

Angular Query

This library is currently in an experimental stage. This means that breaking changes will happen in minor AND patch releases. Use at your own risk. If you choose to rely on this in production in an experimental stage, please lock your version to a patch-level version to avoid unexpected breakages.

Functions for fetching, caching and updating asynchronous data in Angular

Documentation

Visit https://tanstack.com/query/latest/docs/angular/overview

Quick Features

  • Transport/protocol/backend agnostic data fetching (REST, GraphQL, promises, whatever!)
  • Auto Caching + Refetching (stale-while-revalidate, Window Refocus, Polling/Realtime)
  • Parallel + Dependent Queries
  • Mutations + Reactive Query Refetching
  • Multi-layer Cache + Automatic Garbage Collection
  • Paginated + Cursor-based Queries
  • Load-More + Infinite Scroll Queries w/ Scroll Recovery
  • Request Cancellation
  • Dedicated Devtools

Quick Start

Angular Query requires Angular 16.

  1. Install angular-query

    $ npm i @tanstack/angular-query-experimental
    # or
    $ pnpm add @tanstack/angular-query-experimental
    # or
    $ yarn add @tanstack/angular-query-experimental
    # or
    $ bun add @tanstack/angular-query-experimental
    
  2. Initialize Angular Query by adding provideAngularQuery to your application

    import { provideAngularQuery } from '@tanstack/angular-query-experimental'
    import { QueryClient } from '@tanstack/angular-query-experimental'
    
    bootstrapApplication(AppComponent, {
      providers: [provideAngularQuery(new QueryClient())],
    })
    
  3. Inject query

    import { injectQuery } from '@tanstack/angular-query-experimental'
    import { Component } from '@angular/core'
    
    @Component({...})
    export class TodosComponent {
      info = injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodoList }))
    }
    
  4. If you need to update options on your query dynamically, make sure to pass them as signals

    import { injectQuery } from '@tanstack/angular-query-experimental'
    import { signal, Component } from '@angular/core'
    
    @Component({...})
    export class TodosComponent {
      id = signal(1)
      enabled = signal(false)
    
      info = injectQuery(() => ({
        queryKey: ['todos', this.id()],
        queryFn: fetchTodoList,
        enabled: this.enabled(),
      }))
    }
    

Keywords

FAQs

Last updated on 23 Apr 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc