Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add Optimistic Updates Example for Angular #8439

Conversation

MatanShushan
Copy link
Contributor

@MatanShushan MatanShushan commented Dec 14, 2024

This pull request introduces an optimistic updates example, utilizing @tanstack/angular-query-experimental, similar to the existing React example.

Key Features:

Demonstrates optimistic update capabilities in Angular with @tanstack/angular-query-experimental.
Implements a MockApiInterceptor to simulate API calls (GET, POST) for task management via sessionStorage.
Integrates Angular's dependency injection and HttpClient with @tanstack/angular-query-experimental.
Provides a seamless testing experience without requiring a real backend.

How It Complements the Project:

Adds an Angular implementation to complement the existing React optimistic updates example.
Offers users of @tanstack/angular-query-experimental a practical and functional reference.

Testing:

The example has been tested locally using pnpm run dev.
Mock task data is managed via sessionStorage.

Notes:

Feedback is welcome for further refinements or feature additions.

- Implemented OptimisticUpdatesComponent with Angular Query for managing optimistic UI updates.
- Added TasksService to handle query and mutation logic with , , and  handlers.
- Included mock API interceptor for simulating backend responses.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
Copy link

nx-cloud bot commented Dec 14, 2024

View your CI Pipeline Execution ↗ for commit d2117f2.

Command Status Duration Result
nx affected --targets=test:sherif,test:knip,tes... ✅ Succeeded 3m 28s View ↗
nx run-many --target=build --exclude=examples/*... ✅ Succeeded 33s View ↗

☁️ Nx Cloud last updated this comment at 2025-02-18 19:02:20 UTC

MatanShushan and others added 2 commits December 14, 2024 21:35

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
Copy link

pkg-pr-new bot commented Dec 14, 2024

Open in Stackblitz

More templates

@tanstack/angular-query-devtools-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-devtools-experimental@8439

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@8439

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@8439

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@8439

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@8439

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@8439

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@8439

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@8439

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@8439

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@8439

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@8439

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@8439

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@8439

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@8439

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@8439

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@8439

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@8439

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@8439

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@8439

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@8439

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@8439

commit: d2117f2

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
…angular-optimistic-updates-example
@arnoud-dv arnoud-dv self-assigned this Jan 3, 2025
@github-actions github-actions bot added the documentation Improvements or additions to documentation label Feb 18, 2025
Copy link

codecov bot commented Feb 18, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 46.28%. Comparing base (caf7bde) to head (d2117f2).
Report is 2 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

@@           Coverage Diff           @@
##             main    #8439   +/-   ##
=======================================
  Coverage   46.28%   46.28%           
=======================================
  Files         199      199           
  Lines        7549     7549           
  Branches     1730     1732    +2     
=======================================
  Hits         3494     3494           
  Misses       3675     3675           
  Partials      380      380           
Components Coverage Δ
@tanstack/angular-query-devtools-experimental ∅ <ø> (∅)
@tanstack/angular-query-experimental 88.65% <ø> (ø)
@tanstack/eslint-plugin-query 88.03% <ø> (ø)
@tanstack/query-async-storage-persister 43.85% <ø> (ø)
@tanstack/query-broadcast-client-experimental ∅ <ø> (∅)
@tanstack/query-codemods 0.00% <ø> (ø)
@tanstack/query-core 93.95% <ø> (ø)
@tanstack/query-devtools 4.78% <ø> (ø)
@tanstack/query-persist-client-core 57.73% <ø> (ø)
@tanstack/query-sync-storage-persister 84.61% <ø> (ø)
@tanstack/react-query 95.37% <ø> (ø)
@tanstack/react-query-devtools 10.00% <ø> (ø)
@tanstack/react-query-next-experimental ∅ <ø> (∅)
@tanstack/react-query-persist-client 100.00% <ø> (ø)
@tanstack/solid-query 78.20% <ø> (ø)
@tanstack/solid-query-devtools ∅ <ø> (∅)
@tanstack/solid-query-persist-client 100.00% <ø> (ø)
@tanstack/svelte-query 87.33% <ø> (ø)
@tanstack/svelte-query-devtools ∅ <ø> (∅)
@tanstack/svelte-query-persist-client 100.00% <ø> (ø)
@tanstack/vue-query 71.01% <ø> (ø)
@tanstack/vue-query-devtools ∅ <ø> (∅)

@arnoud-dv arnoud-dv merged commit d07a3db into TanStack:main Feb 18, 2025
6 of 7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants