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(Angular-query): add Angular auto-refetching example #8371

Conversation

MatanShushan
Copy link
Contributor

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

Key Features:

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

How It Complements the Project:

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

Testing:

  • The example has been tested locally using pnpm run dev in the examples/angular-auto-refetching directory.
  • Mock task data is preloaded into localStorage for demonstration.

Notes:

  • Feedback is welcome for further refinements or feature additions.

Implement an example showcasing auto-refetching in Angular using TanStack Query. Includes a mock API interceptor to simulate HTTP calls for tasks.
Implement an example showcasing auto-refetching in Angular using TanStack Query. Includes a mock API interceptor to simulate HTTP calls for tasks.
@MatanShushan MatanShushan changed the title feat(examples): add Angular auto-refetching example feat(Angular query): add Angular auto-refetching example Nov 28, 2024
@MatanShushan MatanShushan changed the title feat(Angular query): add Angular auto-refetching example feat(Angular-query): add Angular auto-refetching example Nov 28, 2024
Copy link

nx-cloud bot commented Nov 28, 2024

☁️ Nx Cloud Report

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

Sent with 💌 from NxCloud.

@arnoud-dv arnoud-dv self-assigned this Nov 30, 2024
Copy link

pkg-pr-new bot commented Nov 30, 2024

Open in Stackblitz

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/angular-query-devtools-experimental

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-persist-client

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

@tanstack/solid-query-devtools

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 8372d7e

@github-actions github-actions bot added the documentation Improvements or additions to documentation label Dec 4, 2024
Copy link

codecov bot commented Dec 4, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 46.12%. Comparing base (8ccc36c) to head (8372d7e).

Additional details and impacted files

Impacted file tree graph

@@           Coverage Diff           @@
##             main    #8371   +/-   ##
=======================================
  Coverage   46.12%   46.12%           
=======================================
  Files         200      200           
  Lines        7502     7502           
  Branches     1713     1715    +2     
=======================================
  Hits         3460     3460           
  Misses       3667     3667           
  Partials      375      375           
Components Coverage Δ
@tanstack/angular-query-devtools-experimental ∅ <ø> (∅)
@tanstack/angular-query-experimental 87.13% <ø> (ø)
@tanstack/eslint-plugin-query 88.22% <ø> (ø)
@tanstack/query-async-storage-persister 43.85% <ø> (ø)
@tanstack/query-broadcast-client-experimental ∅ <ø> (∅)
@tanstack/query-codemods 0.00% <ø> (ø)
@tanstack/query-core 94.57% <ø> (ø)
@tanstack/query-devtools 4.78% <ø> (ø)
@tanstack/query-persist-client-core 57.73% <ø> (ø)
@tanstack/query-sync-storage-persister 84.61% <ø> (ø)
@tanstack/react-query 95.54% <ø> (ø)
@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.45% <ø> (ø)
@tanstack/vue-query-devtools ∅ <ø> (∅)

@arnoud-dv arnoud-dv force-pushed the feat/query-example-angular-auto-refetching branch from 8372d7e to 87f2e6b Compare December 4, 2024 23:27
@arnoud-dv arnoud-dv merged commit d6621a8 into TanStack:main Dec 4, 2024
1 check 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.

2 participants