itchy-amethyst

Should skipToken behave just like enabled?

I have code that is analogous to:

@Injectable({ providedIn: 'root' })
export class EntityQueriesService {
  public detail(id: number | undefined) {
    return queryOptions({
      queryKey: ['entity', 'detail', id] as const,
      queryFn:
        id === undefined
          ? skipToken
          : async () => lastValueFrom(this.apiService.get$(id)),
    });
  }
}

@Injectable({ providedIn: 'root' })
export class EntityQueriesService {
  public detail(id: number | undefined) {
    return queryOptions({
      queryKey: ['entity', 'detail', id] as const,
      queryFn:
        id === undefined
          ? skipToken
          : async () => lastValueFrom(this.apiService.get$(id)),
    });
  }
}

Which, in an injection context, is being passed into a call to injectQuery:

private id = signal<nunber | undefined>(undefined);
private query = injectQuery(() => this.queries.detail(id()));
// ...
private onEvent(id: number) {
  this.id.set(id);
}

private id = signal<nunber | undefined>(undefined);
private query = injectQuery(() => this.queries.detail(id()));
// ...
private onEvent(id: number) {
  this.id.set(id);
}

However, the query is not happening when the id is set. This works when I use the enabled flag instead of skipToken Am I missing something?

4 Replies

rival-black•6mo ago

On a query-core level, yes, they are the same. skipToken just sets enabled

exotic-emerald•6mo ago

  post(postId: number) {
    return queryOptions({
      queryKey: ['post', postId],
      queryFn: postId % 2 === 0 ? () => {
        return lastValueFrom(
          this.http.get<Post>(
            `https://jsonplaceholder.typicode.com/posts/${postId}`,
          ),
        )
      } : skipToken,
    })
  }

  post(postId: number) {
    return queryOptions({
      queryKey: ['post', postId],
      queryFn: postId % 2 === 0 ? () => {
        return lastValueFrom(
          this.http.get<Post>(
            `https://jsonplaceholder.typicode.com/posts/${postId}`,
          ),
        )
      } : skipToken,
    })
  }

This works for me - query with odd postId is correctly disabled. https://stackblitz.com/edit/tanstack-query-3p97buql?file=src%2Fapp%2Fservices%2Fqueries-service.ts

Arnoud de Vries

StackBlitz

TanStack Query Angular Skiptoken (forked) - StackBlitz

Run official live example code for Query Query Options From A Service, created by Tanstack on StackBlitz

itchy-amethystOP•6mo ago

I got it working now. Thank you both very much for taking the time to answer. I have a great (brief) experience using TanStack Query in Angular, and have had positive interactions sharing it with other engineers and coworkers. It is exciting. @TkDodo 🔮, that is good to know that skipToken evaluates to be equivalent to enabled, it is intuitive. @arnoud, that was a helpful example that served as a sanity check. TMI: I ended up just confusing myself iterating my first TanStack Query implementation in a complex codebase about a week ago, setting up the signals correctly, the query options services, and understanding the types. Then I topped that off by working on this too late last night so I forgot to provide the query options into injectQuery, I wrote code like private query = this.queries.detail(id()). Regardless, it is all clear now.

exotic-emerald•6mo ago

Thanks for the update! Always makes me happy to hear people enjoy working with it.

Gaming

Programming

Should skipToken behave just like enabled?

Did you find this page helpful?