[angular-query] toResource causes console error with debounced validation

[ThiloAschebrock]

Describe the bug

First, thank you for publishing the stable Angular Query RC and for adding the new toResource() integration in #11516.

I found an issue when using toResource(injectQuery(...)) with Signal Forms validateAsync() and its debounce option. While the debounce is pending, Angular reports the following global console error:

ERROR ResourceParamsStatus: LOADING

The query itself succeeds and validation completes. The error occurs while the debounced validator parameter is loading.

Removing the debounce option from validateAsync makes the console error disappear.

This seems related to the Signal Forms integration discussed in #10788. The current design of this helper might need to be reconsidered so that it can better support this use case as well.

Your minimal, reproducible example

https://stackblitz.com/edit/stackblitz-starters-rq6qsn9u?file=src%2Fmain.ts

Steps to reproduce

1. Run the example.
2. Type any value into the  input.
3. Observe the browser console while the 200 ms debounce is pending.

Expected behavior

The validator should enter its pending state and then resolve without reporting a global error.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• @angular/core :  22.1.7 
• Browser: Chromium
• Operating system: macOS

Tanstack Query adapter

angular-query

TanStack Query version

v5.0.0-rc.0

TypeScript version

6.0.2

Additional context

The traditional approach to define a resource using

resource({
    params,
    loader: ({ params }) => queryClient.query(options(params)),
})

works due to loader only executing once the params are available.

[TkDodo]

@benjavicente FYI

[benjavicente]

I'm taking a look, fully integrating into signal forms doesn't seem simple as it looked since the signal of validateAsync seems to be leaking an implementation detail of resources that we can't handle right now 🤔 . The workaround at the moment would be to wrap the signal from validateAsync into a resource, like this:

  readonly form = form(this.model, (path) => {
    validateAsync(path, {
      params: ({ value }) => value(),
      debounce: 200,
      factory: (params) => {
        // This catches the sentinel that is causing the issue
        const settledParams = resource({
          params: () => params(),
          loader: async ({ params }) => params,
        })
  
        return toResource(
          injectQuery(() => {
            const ready = settledParams.status() === 'resolved'
            const code = ready ? settledParams.value() : undefined
  
            return {
              queryKey: ['code', code],
              queryFn: async () => {
                console.log(code)
                return true
              },
              enabled: ready && code !== undefined,
            }
          }),
        )
      },
      onSuccess: () => undefined,
      onError: () => undefined,
    })
  })

[ThiloAschebrock]

Thank you for the swift feedback! I have noticed that you already raised angular/angular#70884 with the Angular team. Let's see if this can be addressed within the framework.