Skip to content

Feature/angular query#6195

Merged
TkDodo merged 45 commits into
TanStack:mainfrom
inshared:feature/angular-query
Dec 1, 2023
Merged

Feature/angular query#6195
TkDodo merged 45 commits into
TanStack:mainfrom
inshared:feature/angular-query

Conversation

@arnoud-dv

@arnoud-dv arnoud-dv commented Oct 19, 2023

Copy link
Copy Markdown
Contributor

Experimental Angular adapter

Uses signals, will support Angular 17+

The Svelte adapter served as a very good base, thanks! ❤️

Feedback is very welcome! Contact me on the Tanstack Discord in the angular-query channel or in this Github discussion.

To do

  • react to attribute changes of dev tools
  • find a solution for dev tools needing "skipLibCheck": true setting in app using them
  • reduce boilerplate for options signals
  • redo dependency injection and providers
    • improve query client mounting and unmounting
    • inject* functions such as injectQuery
  • injectInfiniteQuery
  • injectMutationState
  • docs
  • update unit tests to use the new function based API
  • more unit tests
  • more examples
  • integration test
image

@vercel

vercel Bot commented Oct 19, 2023

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment
Name Status Preview Comments Updated (UTC)
query ⬜️ Ignored (Inspect) Visit Preview Dec 1, 2023 0:42am

@codesandbox-ci

codesandbox-ci Bot commented Oct 19, 2023

Copy link
Copy Markdown

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 2af306d:

Sandbox Source
@tanstack/query-example-angular-basic Configuration
@tanstack/query-example-react-basic-typescript Configuration
@tanstack/query-example-solid-basic-typescript Configuration
@tanstack/query-example-svelte-basic Configuration
@tanstack/query-example-vue-basic Configuration

Comment thread docs/angular/devtools.md Outdated
Comment thread docs/angular/devtools.md Outdated
Comment thread docs/angular/devtools.md Outdated
Comment thread docs/angular/devtools.md Outdated
Comment thread packages/angular-query-experimental/src/QueryClientService.ts Outdated
Comment thread packages/angular-query-experimental/src/QueryClientService.ts Outdated
Comment thread packages/angular-query-experimental/src/useIsFetching.ts Outdated
Comment thread packages/angular-query-experimental/src/useIsFetching.ts Outdated
Comment thread packages/angular-query-experimental/src/useIsFetching.ts Outdated
Comment thread packages/angular-query-experimental/src/useIsFetching.ts Outdated
Comment thread packages/angular-query-experimental/src/providers.ts Outdated
Comment thread packages/angular-query-experimental/src/providers.ts
Comment thread examples/angular/simple/src/simple-example.component.ts Outdated
Comment thread examples/angular/simple/src/simple-example.component.ts
Comment thread examples/angular/simple/src/simple-example.component.ts Outdated
Comment thread packages/angular-query-experimental/src/createBaseQuery.ts
Comment thread packages/angular-query-experimental/src/createBaseQuery.ts Outdated
postIdSignal = signal<number>(0)
postQuery = injectQuery(() => ({
enabled: this.postIdSignal() > 0,
queryKey: ['post', this.postIdSignal()],

@ApplY3D ApplY3D Nov 13, 2023

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we add the possibility to pass an Observable into the queryKey? Great things are now available with signals, but we still have observables.

@ApplY3D ApplY3D Nov 13, 2023

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for example:

queryKey: ['post', this.postId$]
// or
queryKey: this.postId$.pipe(map(id => ['post', id]))

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also other props like enabled might be reactive. Probably injectQuery itself should be able to receive Observable

@arnoud-dv arnoud-dv Nov 14, 2023

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi, what do you think about using toSignal()?

queryKey: ['post', toSignal(this.postId$)]

Would that be sufficient? Willing to look into adding first class support for observables if many people want it but on the other hand it might increase complexity quite a bit and Angular has good interop between observables and signals.

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it might suffice, but it needs to be tested in real situations for potential leaks or other issues.

@nx-cloud

nx-cloud Bot commented Nov 30, 2023

Copy link
Copy Markdown

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 2af306d. 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 1 target

Sent with 💌 from NxCloud.

@codecov-commenter

codecov-commenter commented Nov 30, 2023

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 90.42553% with 9 lines in your changes missing coverage. Please review.
✅ Project coverage is 87.83%. Comparing base (af0ff9a) to head (2af306d).
⚠️ Report is 1563 commits behind head on main.

Files with missing lines Patch % Lines
...ages/angular-query-experimental/src/query-proxy.ts 52.94% 8 Missing ⚠️
...s/angular-query-experimental/src/injectMutation.ts 94.11% 1 Missing ⚠️

❌ Your project status has failed because the head coverage (87.83%) is below the target coverage (90.00%). You can increase the head coverage or adjust the target coverage.

Additional details and impacted files
@@            Coverage Diff            @@
##           main    #6195       +/-   ##
=========================================
+ Coverage      0   87.83%   +87.83%     
=========================================
  Files         0       87       +87     
  Lines         0     2926     +2926     
  Branches      0      803      +803     
=========================================
+ Hits          0     2570     +2570     
- Misses        0      297      +297     
- Partials      0       59       +59     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@TkDodo TkDodo merged commit 46034aa into TanStack:main Dec 1, 2023
diegohaz referenced this pull request in ariakit/ariakit Dec 2, 2023
[![Mend Renovate logo
banner](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [@tanstack/react-query](https://tanstack.com/query)
([source](https://togithub.com/TanStack/query)) | [`5.10.0` ->
`5.12.2`](https://renovatebot.com/diffs/npm/@tanstack%2freact-query/5.10.0/5.12.2)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@tanstack%2freact-query/5.12.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@tanstack%2freact-query/5.12.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@tanstack%2freact-query/5.10.0/5.12.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@tanstack%2freact-query/5.10.0/5.12.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>TanStack/query (@&#8203;tanstack/react-query)</summary>

###
[`v5.12.2`](https://togithub.com/TanStack/query/releases/tag/v5.12.2)

[Compare
Source](https://togithub.com/TanStack/query/compare/v5.12.1...v5.12.2)

Version 5.12.2 - 12/2/2023, 9:37 AM

##### Changes

##### Fix

- useQueries: add type tests for useQueries and fix a couple of type
bugs ([#&#8203;6471](https://togithub.com/TanStack/query/issues/6471))
([`b54936f`](https://togithub.com/TanStack/query/commit/b54936f1)) by
Charlotte Grace (Bone)

##### Docs

- angular-query: fix quickstart
([`23374bb`](https://togithub.com/TanStack/query/commit/23374bb4)) by
[@&#8203;eneajaho](https://togithub.com/eneajaho)
- angular-query: compatible with angular 17
([#&#8203;6469](https://togithub.com/TanStack/query/issues/6469))
([`ac046b1`](https://togithub.com/TanStack/query/commit/ac046b11)) by
Arnoud

##### Packages

-
[@&#8203;tanstack/react-query](https://togithub.com/tanstack/react-query)[@&#8203;5](https://togithub.com/5).12.2
-
[@&#8203;tanstack/vue-query](https://togithub.com/tanstack/vue-query)[@&#8203;5](https://togithub.com/5).12.2
-
[@&#8203;tanstack/react-query-devtools](https://togithub.com/tanstack/react-query-devtools)[@&#8203;5](https://togithub.com/5).12.2
-
[@&#8203;tanstack/react-query-persist-client](https://togithub.com/tanstack/react-query-persist-client)[@&#8203;5](https://togithub.com/5).12.2
-
[@&#8203;tanstack/react-query-next-experimental](https://togithub.com/tanstack/react-query-next-experimental)[@&#8203;5](https://togithub.com/5).12.2

###
[`v5.12.1`](https://togithub.com/TanStack/query/releases/tag/v5.12.1)

[Compare
Source](https://togithub.com/TanStack/query/compare/v5.12.0...v5.12.1)

Version 5.12.1 - 12/1/2023, 3:42 PM

##### Changes

##### Feat

- experimental angular query adapter
([https://github.com/TanStack/query/pull/6195](https://togithub.com/TanStack/query/pull/6195))
(TanStack/query@46034aa)
by Arnoud

##### Fix

- angular release process
([#&#8203;6468](https://togithub.com/TanStack/query/issues/6468))
([`4e8a6c5`](https://togithub.com/TanStack/query/commit/4e8a6c5a)) by
Dominik Dorfmeister

##### Chore

- Use prettier v4 alpha
([#&#8203;6466](https://togithub.com/TanStack/query/issues/6466))
([`3a60413`](https://togithub.com/TanStack/query/commit/3a60413d)) by
Lachlan Collins

##### Packages

-
[@&#8203;tanstack/eslint-plugin-query](https://togithub.com/tanstack/eslint-plugin-query)[@&#8203;5](https://togithub.com/5).12.1
-
[@&#8203;tanstack/query-async-storage-persister](https://togithub.com/tanstack/query-async-storage-persister)[@&#8203;5](https://togithub.com/5).12.1
-
[@&#8203;tanstack/query-broadcast-client-experimental](https://togithub.com/tanstack/query-broadcast-client-experimental)[@&#8203;5](https://togithub.com/5).12.1
-
[@&#8203;tanstack/query-core](https://togithub.com/tanstack/query-core)[@&#8203;5](https://togithub.com/5).12.1
-
[@&#8203;tanstack/query-devtools](https://togithub.com/tanstack/query-devtools)[@&#8203;5](https://togithub.com/5).12.1
-
[@&#8203;tanstack/query-persist-client-core](https://togithub.com/tanstack/query-persist-client-core)[@&#8203;5](https://togithub.com/5).12.1
-
[@&#8203;tanstack/query-sync-storage-persister](https://togithub.com/tanstack/query-sync-storage-persister)[@&#8203;5](https://togithub.com/5).12.1
-
[@&#8203;tanstack/react-query](https://togithub.com/tanstack/react-query)[@&#8203;5](https://togithub.com/5).12.1
-
[@&#8203;tanstack/react-query-devtools](https://togithub.com/tanstack/react-query-devtools)[@&#8203;5](https://togithub.com/5).12.1
-
[@&#8203;tanstack/react-query-persist-client](https://togithub.com/tanstack/react-query-persist-client)[@&#8203;5](https://togithub.com/5).12.1
-
[@&#8203;tanstack/react-query-next-experimental](https://togithub.com/tanstack/react-query-next-experimental)[@&#8203;5](https://togithub.com/5).12.1
-
[@&#8203;tanstack/solid-query](https://togithub.com/tanstack/solid-query)[@&#8203;5](https://togithub.com/5).12.1
-
[@&#8203;tanstack/solid-query-devtools](https://togithub.com/tanstack/solid-query-devtools)[@&#8203;5](https://togithub.com/5).12.1
-
[@&#8203;tanstack/solid-query-persist-client](https://togithub.com/tanstack/solid-query-persist-client)[@&#8203;5](https://togithub.com/5).12.1
-
[@&#8203;tanstack/svelte-query](https://togithub.com/tanstack/svelte-query)[@&#8203;5](https://togithub.com/5).12.1
-
[@&#8203;tanstack/svelte-query-devtools](https://togithub.com/tanstack/svelte-query-devtools)[@&#8203;5](https://togithub.com/5).12.1
-
[@&#8203;tanstack/svelte-query-persist-client](https://togithub.com/tanstack/svelte-query-persist-client)[@&#8203;5](https://togithub.com/5).12.1
-
[@&#8203;tanstack/vue-query](https://togithub.com/tanstack/vue-query)[@&#8203;5](https://togithub.com/5).12.1
-
[@&#8203;tanstack/vue-query-devtools](https://togithub.com/tanstack/vue-query-devtools)[@&#8203;5](https://togithub.com/5).12.1
-
[@&#8203;tanstack/angular-query-devtools-experimental](https://togithub.com/tanstack/angular-query-devtools-experimental)[@&#8203;5](https://togithub.com/5).12.1
-
[@&#8203;tanstack/angular-query-experimental](https://togithub.com/tanstack/angular-query-experimental)[@&#8203;5](https://togithub.com/5).12.1

###
[`v5.12.0`](https://togithub.com/TanStack/query/compare/v5.10.0...v5.12.0)

[Compare
Source](https://togithub.com/TanStack/query/compare/v5.10.0...v5.12.0)

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined),
Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you
are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://developer.mend.io/github/ariakit/ariakit).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy41OS44IiwidXBkYXRlZEluVmVyIjoiMzcuNTkuOCIsInRhcmdldEJyYW5jaCI6Im1haW4ifQ==-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

10 participants