Skip to main content

UseQueuedState

Defined in: packages/ember-pacer/src/queuer/useQueuedState.ts:49

Exposes pending queue items together with the queue that processes them.

Retains accepted items until processing. Ordering, capacity, wait, and started options follow the underlying queue.

Return value

Yields the queue instance. Read pending items from queue.state.items and enqueue with queue.addItem().

State and ownership

Items are selected by default. A custom selector must retain items and may add other state fields. The returned collection contains pending items; async active items are separate.

Invoke in a Glimmer template. Positional arguments provide the callback or value and optional selector. Named arguments provide options. Removing the invocation runs cleanup. Tracked named arguments refresh options after rendering. Local options override provider defaults without replacing the utility or its pending work. onUnmount replaces default cleanup and receives the utility instance. A custom callback must perform every needed cancel, stop, or abort action.

Example

import { on } from '@ember/modifier'
import { fn } from '@ember/helper'
import { useQueuedState } from '@tanstack/ember-pacer'

// Inside a component template:
<template>
{{#let (useQueuedState @process wait=500) as |queue|}}
  <button {{on "click" (fn queue.addItem 1)}}>Add</button>
  <output>{{queue.state.items.length}}</output>
{{/let}}
</template>

See

useQueuer

Extends

  • default<{ Args: { Named: EmberQueuerOptions<TValue, TSelected>; Positional: [(item) => void] | [(item) => void, (state) => TSelected]; }; Return: EmberQueuer<TValue, TSelected>; }>

Type Parameters

TValue

TValue

TSelected

TSelected extends Pick<QueuerState<TValue>, "items"> = Pick<QueuerState<TValue>, "items">

Constructors

Constructor

new UseQueuedState<TValue, TSelected>(owner?): UseQueuedState;

Defined in: node_modules/.pnpm/ember-source@7.3.0_@glimmer+component@2.1.1_supports-color@7.2.0__supports-color@7.2.0/node_modules/ember-source/types/stable/@ember/object/index.d.ts:28

Parameters

owner?

Owner

Returns

UseQueuedState

Inherited from

Helper<{
  Args: {
    Positional:
      | [fn: (item: TValue) => void]
      | [
          fn: (item: TValue) => void,
          selector: (state: QueuerState<TValue>) => TSelected,
        ]
    Named: EmberQueuerOptions<TValue, TSelected>
  }
  Return: EmberQueuer<TValue, TSelected>
}>.constructor

Methods

compute()

compute(positional, options): EmberQueuer<TValue, TSelected>;

Defined in: packages/ember-pacer/src/queuer/useQueuedState.ts:75

Override this function when writing a class-based helper.

Parameters

positional

[(item) => void, (state) => TSelected]

The positional arguments to the helper

options

EmberQueuerOptions<TValue, TSelected>

Returns

EmberQueuer<TValue, TSelected>

Method

compute

Since

1.13.0

Overrides

Helper.compute
Edit on GitHub