Skip to content

feat: implement API cache for the project groups page #3036

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

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

Conversation

Sameh16
Copy link
Collaborator

@Sameh16 Sameh16 commented May 6, 2025

Changes proposed ✍️

What

copilot:summary

copilot:poem

Why

How

copilot:walkthrough

Checklist ✅

  • Label appropriately with Feature, Improvement, or Bug.
  • Add screenshots to the PR description for relevant FE changes
  • New backend functionality has been unit-tested.
  • API documentation has been updated (if necessary) (see docs on API documentation).
  • Quality standards are met.

Sameh16 added 11 commits May 5, 2025 15:52
- Added @tanstack/vue-query and its devtools to the project.
- Implemented VueQuery in main application file for global state management.
- Updated project groups table to utilize pagination and infinite scrolling with VueQuery.
- Refactored project groups page to use VueQuery for data fetching and state management.
- Created segments service to handle API requests for project groups.
- Introduced TanstackKey enum for query keys to maintain consistency.

Signed-off-by: Sameh16 <[email protected]>
…Fn for improved query handling

Signed-off-by: Sameh16 <[email protected]>
@Sameh16 Sameh16 self-assigned this May 6, 2025
@Sameh16 Sameh16 requested a review from gaspergrom as a code owner May 6, 2025 08:04
@Sameh16 Sameh16 requested a review from Copilot May 6, 2025 09:08
Copy link

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

This PR implements API caching for the project groups page by integrating Tanstack Query with Vue Query and refactoring related services and components. Key changes include:

  • Introducing a new TanstackKey enum for query keys.
  • Refactoring the SegmentsService and various component pages/forms to use useInfiniteQuery, useMutation, and proper query keys.
  • Integrating VueQueryDevtools and configuring the VueQueryPlugin with a QueryClient in main.ts.

Reviewed Changes

Copilot reviewed 9 out of 11 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
frontend/src/shared/types/tanstack.ts Added a new enum for caching keys.
frontend/src/modules/lf/segments/segments.service.ts Updated service methods to support new query patterns.
frontend/src/modules/admin/modules/projects/pages/project-groups.page.vue Refactored querying logic using useInfiniteQuery and updated conditional rendering.
frontend/src/modules/admin/modules/projects/components/view/lf-project-groups-table.vue Adjusted table data sourcing from the updated pagination structure.
frontend/src/modules/admin/modules/projects/components/form/lf-project-group-form.vue Refactored query and mutation logic in the project group form.
frontend/src/modules/admin/modules/projects/components/form/lf-project-form.vue Updated query keys and mutation logic in the project form.
frontend/src/main.ts Installed VueQueryPlugin with proper QueryClient configuration.
frontend/src/app.vue Integrated VueQueryDevtools into the main application layout.
Files not reviewed (2)
  • frontend/package-lock.json: Language not supported
  • frontend/package.json: Language not supported

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.

2 participants