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

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

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.
Copy link

nx-cloud bot commented Dec 14, 2024

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 23cfe36. 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


🟥 Failed Commands
nx affected --targets=test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build --parallel=3
✅ Successfully ran 1 target

Sent with 💌 from NxCloud.

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-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@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/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: 23cfe36

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

Successfully merging this pull request may close these issues.

1 participant