feat(angular-query): injectQueries

[Arthie]

Noticed injectQueries had yet to be fully implemented, this is my attempt to get it working.
Did some limited testing, and added simple test cases that are all passing.

Looking for feedback.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit b7315dc. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 2 targets

• nx affected --targets=test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build --parallel=3
• nx run-many --target=build --exclude=examples/** --exclude=integrations/**

---

Sent with 💌 from NxCloud.

[pkg-pr-new]

Open in Stackblitz

More templates

• @tanstack/query-example-angular-basic
• @tanstack/query-example-angular-devtools-panel
• @tanstack/query-example-angular-pagination
• @tanstack/query-example-angular-infinite-query-with-max-pages
• @tanstack/query-example-angular-query-options-from-a-service
• @tanstack/query-example-angular-router
• @tanstack/query-example-angular-rxjs
• @tanstack/query-example-angular-simple
• @tanstack/query-example-react-algolia
• @tanstack/query-example-react-auto-refetching
• @tanstack/query-example-react-basic
• @tanstack/query-example-react-basic-graphql-request
• @tanstack/query-example-react-default-query-function
• @tanstack/query-example-react-devtools-panel
• @tanstack/query-example-react-infinite-query-with-max-pages
• @tanstack/query-example-react-load-more-infinite-scroll
• @tanstack/query-example-react-nextjs
• @tanstack/query-example-react-nextjs-app-prefetching
• @tanstack/query-example-nextjs-suspense-streaming
• @tanstack/query-example-react-optimistic-updates-cache
• @tanstack/query-example-react-offline
• @tanstack/query-example-react-optimistic-updates-ui
• @tanstack/query-example-react-pagination
• @tanstack/query-example-react-playground
• @tanstack/query-example-react-prefetching
• @tanstack/query-example-react-react-native
• @tanstack/query-example-react-router
• @tanstack/query-example-react-rick-morty
• @tanstack/query-example-react-shadow-dom
• @tanstack/query-example-react-simple
• @tanstack/query-example-react-star-wars
• @tanstack/query-example-react-suspense
• @tanstack/query-example-solid-astro
• @tanstack/query-example-solid-basic
• @tanstack/query-example-solid-basic-graphql-request
• @tanstack/query-example-solid-default-query-function
• @tanstack/query-example-solid-simple
• @tanstack/query-example-solid-start-streaming
• @tanstack/query-example-vue-2.6-basic
• @tanstack/query-example-vue-2.7-basic
• @tanstack/query-example-vue-basic
• @tanstack/query-example-vue-dependent-queries
• @tanstack/query-example-vue-nuxt3
• @tanstack/query-example-vue-persister
• @tanstack/query-example-vue-simple
• @tanstack/query-example-svelte-auto-refetching
• @tanstack/query-example-svelte-basic
• @tanstack/query-example-svelte-load-more-infinite-scroll
• @tanstack/query-example-svelte-optimistic-updates
• @tanstack/query-example-svelte-playground
• @tanstack/query-example-svelte-ssr
• @tanstack/query-example-svelte-simple
• @tanstack/query-example-svelte-star-wars

@tanstack/angular-query-devtools-experimental

pnpm add https://pkg.pr.new/@tanstack/angular-query-devtools-experimental@8007

@tanstack/query-async-storage-persister

pnpm add https://pkg.pr.new/@tanstack/query-async-storage-persister@8007

@tanstack/query-broadcast-client-experimental

pnpm add https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@8007

@tanstack/eslint-plugin-query

pnpm add https://pkg.pr.new/@tanstack/eslint-plugin-query@8007

@tanstack/query-core

pnpm add https://pkg.pr.new/@tanstack/query-core@8007

@tanstack/angular-query-experimental

pnpm add https://pkg.pr.new/@tanstack/angular-query-experimental@8007

@tanstack/query-devtools

pnpm add https://pkg.pr.new/@tanstack/query-devtools@8007

@tanstack/query-persist-client-core

pnpm add https://pkg.pr.new/@tanstack/query-persist-client-core@8007

@tanstack/query-sync-storage-persister

pnpm add https://pkg.pr.new/@tanstack/query-sync-storage-persister@8007

@tanstack/react-query-devtools

pnpm add https://pkg.pr.new/@tanstack/react-query-devtools@8007

@tanstack/react-query

pnpm add https://pkg.pr.new/@tanstack/react-query@8007

@tanstack/react-query-next-experimental

pnpm add https://pkg.pr.new/@tanstack/react-query-next-experimental@8007

@tanstack/react-query-persist-client

pnpm add https://pkg.pr.new/@tanstack/react-query-persist-client@8007

@tanstack/solid-query

pnpm add https://pkg.pr.new/@tanstack/solid-query@8007

@tanstack/solid-query-devtools

pnpm add https://pkg.pr.new/@tanstack/solid-query-devtools@8007

@tanstack/solid-query-persist-client

pnpm add https://pkg.pr.new/@tanstack/solid-query-persist-client@8007

@tanstack/svelte-query

pnpm add https://pkg.pr.new/@tanstack/svelte-query@8007

@tanstack/svelte-query-devtools

pnpm add https://pkg.pr.new/@tanstack/svelte-query-devtools@8007

@tanstack/svelte-query-persist-client

pnpm add https://pkg.pr.new/@tanstack/svelte-query-persist-client@8007

@tanstack/vue-query

pnpm add https://pkg.pr.new/@tanstack/vue-query@8007

@tanstack/vue-query-devtools

pnpm add https://pkg.pr.new/@tanstack/vue-query-devtools@8007

commit: b7315dc

[codecov]

Codecov Report

Attention: Patch coverage is 94.44444% with 2 lines in your changes missing coverage. Please review.

Project coverage is 94.62%. Comparing base (102b6a8) to head (b7315dc).

Additional details and impacted files

@@            Coverage Diff            @@
##           main    #8007       +/-   ##
=========================================
+ Coverage      0   94.62%   +94.62%     
=========================================
  Files         0       18       +18     
  Lines         0      279      +279     
  Branches      0       41       +41     
=========================================
+ Hits          0      264      +264     
- Misses        0       14       +14     
- Partials      0        1        +1     

Components	Coverage Δ
@tanstack/angular-query-devtools-experimental	∅ <ø> (∅)
@tanstack/angular-query-experimental	94.62% <94.44%> (∅)
@tanstack/eslint-plugin-query	∅ <ø> (∅)
@tanstack/query-async-storage-persister	∅ <ø> (∅)
@tanstack/query-broadcast-client-experimental	∅ <ø> (∅)
@tanstack/query-codemods	∅ <ø> (∅)
@tanstack/query-core	∅ <ø> (∅)
@tanstack/query-devtools	∅ <ø> (∅)
@tanstack/query-persist-client-core	∅ <ø> (∅)
@tanstack/query-sync-storage-persister	∅ <ø> (∅)
@tanstack/react-query	∅ <ø> (∅)
@tanstack/react-query-devtools	∅ <ø> (∅)
@tanstack/react-query-next-experimental	∅ <ø> (∅)
@tanstack/react-query-persist-client	∅ <ø> (∅)
@tanstack/solid-query	∅ <ø> (∅)
@tanstack/solid-query-devtools	∅ <ø> (∅)
@tanstack/solid-query-persist-client	∅ <ø> (∅)
@tanstack/svelte-query	∅ <ø> (∅)
@tanstack/svelte-query-devtools	∅ <ø> (∅)
@tanstack/svelte-query-persist-client	∅ <ø> (∅)
@tanstack/vue-query	∅ <ø> (∅)
@tanstack/vue-query-devtools	∅ <ø> (∅)

---- 🚨 Try these New Features:

• Flaky Tests Detection - Detect and resolve failed and flaky tests
• JS Bundle Analysis - Avoid shipping oversized bundles

[arnoud-dv]

That's great, finishing injectQueries is one of the major pieces of work remaining. I'll review it but may be a few days.

[Timebutt]

I just pulled this branch into my project since I needed the injectQueries functionality, and found it non-functional in the current implementation in main. Is this something we can get reviewed so that it could make its way into the main branch? Thanks!

[arnoud-dv]

Thanks for your PR @Arthie.

API wise this PR differs from the other adapters as these have a queries property in their useQueries equivalent options. I'd like to stick to the other adapters as close as possible so users can transfer their knowledge between framework implementations and it makes maintenance easier.

The other functions in the Angular adapter reactive to options such as injectQuery have a single callback function returning the options.

In the result returned from these functions each property is a distinct signal, which helps with fine grained reactivity.

In this PR I think we're almost there in implementing an API consistent with these principles. Feel free to contribute either in code or testing, we maintain a list of what needs to be done in the PR.