Skip to content

[angular-query] Accessing .data kicks off the CreateQueryOptions function #7488

Open

Description

Describe the bug

I have a very simple use case when I do not have an error handler or loading indicator, so I am trying to create a query and save a reference to only the .data signal. I am not invoking the signal immediately, but saving a reference to only the signal.
ie: something = injectQuery(() => { ... }).data;

I am using a signal input as a part of my query key.

I wanted to make that signal input required, but in doing so, Angular started throwing a runtime error saying that the required input had no value. From the outside, I was always passing a value in for the input.

After I reverted the input back to not required, I noticed that the CreateQueryOptions function I was using for the signal was actually being invoked immdeiately upon construction of the component as well as after the input value was set.

I was able to narrow it down and realize that this only happens when I have .data on the end in order to store off the signal. I was only doing this for the sake of simplicity. Nothing else in my code needs a reference to the query itself. They only need access to the data signal, so that's what I stored off. I was not expecting that to immediately invoke the options, and thus access the signal input before it is initialized.

I can confirm that if I store the reference to the entire query (ie: without .data), then it works correctly (and I can add .required if I want to). It confuses me because either way, my template will access the signal "immediately" via either query.data() or data(). But I suppose that is actually when rendering, vs at construct time when I store off .data.

Is this just bad practice the way I am trying to do it, or would this actually be considered a bug?

Your minimal, reproducible example

https://stackblitz.com/edit/angular-query-input-order?file=src%2Fapp%2Fsimple-example.component.ts&preset=node

Steps to reproduce

  • Open the repro
  • Look in the TanStack devtools and see that the "broken" example query ran twice. Once with null, and once the correct result:
    image
  • Now, change someInput to be required (see commented out line where the input is defined)
  • You will get a runtime error in the console like so:
    image

Expected behavior

I would expect that I can store off a reference to the .data signal whenever I want without it accessing signal inputs too soon.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

  • OS: MacOS 14.5
  • Browser: Edge
  • Version: 125.0.2535.67

Tanstack Query adapter

angular-query

TanStack Query version

5.40.0

TypeScript version

5.3.3

Additional context

No response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions