feat: Implement resource-cache synchronization Logic#6134
feat: Implement resource-cache synchronization Logic#6134piggggggggy merged 2 commits intocloudforet-io:feature-extra-queryfrom
Conversation
Signed-off-by: samuel.park <samuel.park@megazone.com>
Signed-off-by: samuel.park <samuel.park@megazone.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub. 3 Skipped Deployments
|
|
🎉 @seungyeoneeee has been randomly selected as the reviewer! Please review. 🙏 |
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a centralized resource cache synchronization system through the useResourceCacheSync composable to ensure UI consistency after data-mutating operations across the application.
- Implements
wrapResourceCacheRefreshandwrapResourceCacheUpdatefunctions to handle cache invalidation and updates - Refactors the composable to use generic wrapper functions instead of callback-specific methods
- Applies cache synchronization to CUD operations across 20+ API client composables
Reviewed Changes
Copilot reviewed 22 out of 22 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| use-resource-cache-sync.ts | Core composable refactored with generic wrapper functions and improved type safety |
| use-resource-cache-sync.test.ts | Comprehensive test suite covering both wrapper functions with success/failure scenarios |
| API client composables (20+ files) | Integration of cache refresh wrappers for create, update, delete, and state-change operations |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.
| updatedResults[newDataId] = newData; | ||
| return updatedResults; | ||
| return { ...currentResults, [newDataId]: newData }; | ||
| } |
There was a problem hiding this comment.
The logic for updating existing vs creating new cache entries is identical, making the conditional check redundant. Both branches return the same spread operation.
piggggggggy
requested review from
sulmoJ and
yuda110
and removed request for
seungyeoneeee
sulmoJ
left a comment
sulmoJ
left a comment
There was a problem hiding this comment.
I have a question. I understood how to use wrapResourceCacheRefresh.
However, I don’t clearly understand wrapResourceCacheUpdate.
Could you explain its use case in more detail?
Thank you for your hardwork.
| queryClient.setQueryData(resourceQueryKey, { 'project-123': initialData }); | ||
|
|
||
| const mockApiFn = vi.fn().mockResolvedValue(updatedData); | ||
| const wrappedFn = wrapResourceCacheUpdate(mockApiFn); |
There was a problem hiding this comment.
Recommend: I think naming it updateProject is easier for other developers to understand than wrappedFn.
piggggggggy
merged commit 7273991
into
cloudforet-io:feature-extra-query
Skip Review (optional)
style,chore,ci,test,docs)Description (optional)
Introduce centralized composable,
useResourceCacheSync, to manage consistency of resource query cache.Previously, there was no standard way to update or invalidate the client-side cache after data-mutating operations (Create, Update, Delete), which could lead to stale data being displayed in the UI. This new utility provides a robust and reusable solution to keep the cache synchronized with the server state.
Changes:
Added useResourceCacheSync Composable:
wrapResourceCacheRefresh: Invalidates the relevant resource cache after an API call is settled, ensuring fresh data is fetched on the next query.wrapResourceCacheUpdate: Directly updates the resource cache with the response data from an API call, providing a more immediate UI update without a full refetch.Applied Cache Wrappers to API Clients:
wrapResourceCacheRefreshandwrapResourceCacheUpdatefunctions into the CUD (Create, Update, Delete) methods within theapi-clientscomposables (e.g., useProjectApi, useUserApi, useCollectorApi, etc.).useResourceCacheSync도입기존에는 데이터 변경(생성, 수정, 삭제) 작업 후 클라이언트 캐시를 업데이트하거나 무효화하는 표준화된 방법이 없어 UI에 오래된(stale) 데이터가 표시될 위험이 있었습니다. 이 유틸리티는 캐시와 서버 상태의 동기화를 제공합니다.
주요 변경 사항:
useResourceCacheSyncComposable 추가:wrapResourceCacheRefresh: API 호출이 완료된 후 관련 리소스 캐시를 무효화(invalidate)하여, 다음번 조회 시 최신 데이터를 가져오도록 보장함wrapResourceCacheUpdate: API 호출의 응답 데이터로 캐시를 직접 업데이트하여, 전체 목록을 다시 가져오지 않고도 즉각적인 UI 변경을 제공함API 클라이언트에 캐시 래퍼 적용:
api-clients내의 Composable(예: useProjectApi, useUserApi, useCollectorApi 등)에서 CUD(생성, 수정, 삭제) 관련 메서드에wrapResourceCacheRefresh및wrapResourceCacheUpdate함수를 적용Things to Talk About (optional)