refactor: [M3-7437] - Use @lukemorales/query-key-factory for Profile Queries
#10241
Conversation
bnussman-akamai
added
Enhancement
React Query
bnussman-akamai
requested review from
mjac0bs and
cpathipa
and removed request for
a team
| } from '@tanstack/react-query'; | ||
|
|
||
| // ============================================================================= | ||
| // Config | ||
| // ============================================================================= | ||
| type QueryConfigTypes = 'longLived' | 'noRetry' | 'oneTimeFetch' | 'shortLived'; | ||
|
|
||
| export const queryPresets: Record<QueryConfigTypes, UseQueryOptions<any>> = { |
There was a problem hiding this comment.
UseQueryOptions<any> is less type-safe than letting typescript do the inference
| @@ -66,10 +67,7 @@ export const useInitialRequests = () => { | |||
| }), | |||
|
|
|||
| // Username and whether a user is restricted | |||
| queryClient.prefetchQuery({ | |||
| queryFn: () => getProfile(), | |||
| queryKey: ['profile'], | |||
There was a problem hiding this comment.
This was causing two fetches to GET /v4/profile because we were loading data into ['profile'] and that query key isn't used anymore. Because of parent-child, there are now arguments in the profile query key.
|
Coverage Report: ✅ |
bnussman-akamai
requested review from
jdamore-linode
and removed request for
a team
There was a problem hiding this comment.
Great work @bnussman-akamai in bringing type-safe query keys to the app. I like this direction and agree with using the 3rd party library after considering all tradeoffs. Tested some queries but approving pending all tests pass.
There was a problem hiding this comment.
Nice! thanks for putting this together. As part of this PR, can we add documentation about queries best practice and their usage with this new package? It will help other people help with refactors:
clarifications I can think of would be helpful:
- what a factory should look like
queryClient.invalidateQueries(profileQueries.grants.queryKey);VS invalidating all queries viaqueryClient.invalidateQueries(profileQueries.profile().queryKey);- how nesting works with the factory
- queries best practice (invalidation etc)
any thoughts?
|
I'm happy do document all of that! @abailly-akamai Would it make sense to use the docs site for this? |
|
@bnussman thank you! and yes, i think it would make sense to have a new doc site page dedicated to it |
|
@abailly-akamai I added some initial docs 🎉 I plan to keep iterating and evolving them as I get more comfortable with the new Query Key factory. For example, I'll add a nesting example when we actually implement a factory that uses nesting |
There was a problem hiding this comment.
- Went through the profile tabs and tested various CRUD operations to verify Cloud is responding as expected.
- Observed the query key was invalidated and refetched when expected (e.g. updating grants when creating a new resource as a restricted user; revoking trusted devices)
- Verified we still see a proxy fetch a parent profile in parent/child flows.
Thank you for the docs updates, that's a super helpful addition! Corrected some typos as I read through.
Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>
…eature/namespace-create * 'develop' of https://github.com/vrajesh73/manager: (89 commits) fix: [M3-7269] - Display parent email in user menu when no company name is available for restricted parent user (linode#10248) fix: [M3-7817] - Show correct status of Child Account Enabled column for parent users (linode#10233) upcoming: [M3-7616] - Add Placement Groups Events and Notifications (linode#10221) upcoming: [M3-7816-v2] - Adjust logic for when to show Switch Account button (linode#10266) fix: [M3-7831] - Persisting error messages in ACLB delete dialogs (linode#10254) upcoming: [M3-7842] - Update Assign Linode Drawer and improve query skipping (linode#10263) upcoming: [M3-7704] - Disable Cloning, Private IP, Backups for edge regions (linode#10222) test: Fix test flake for Images landing page test (linode#10267) fix: [M3-7824] - ACLB TCP Rule Creation and other fixes (linode#10264) refactor: [M3-7687] - Linodes Restricted User Experience 2/2 (linode#10227) test: Resolve OBJ create and delete E2E test flake (linode#10245) upcoming: [M3-7723] - Placement Group feature flag as object (linode#10256) chore(deps): Bump sanitize-html from 2.11.0 to 2.12.1 (linode#10247) change: [M3-7813] - Allow the disabling of the TypeToConfirm input (linode#10251) upcoming: [M3-7839] - Change Business Partner to Parent User (linode#10259) upcoming: [M3-7835] - Adjust user table column count (linode#10252) upcoming: [M3 7738] - Update Placement Group Create & Edit Drawers (linode#10205) refactor: [M3-7437] - Use `@lukemorales/query-key-factory` for Profile Queries (linode#10241) fix: React Query `updateInPaginatedStore` helper function not working as expected (linode#10249) test: [M3-7497] - Add tests for child user verification banner (linode#10204) ... # Conflicts: # packages/manager/src/MainContent.tsx # packages/manager/src/dev-tools/FeatureFlagTool.tsx
Description 📝
@lukemorales/query-key-factoryso we are going to proceed with@lukemorales/query-key-factory🏭GET /v4/profilewhen Cloud Manager loadsPreview 📷
How to test 🧪
As an Author I have considered 🤔