refactor: [M3-7437] - Use `@lukemorales/query-key-factory` for Profile Queries by bnussman-akamai · Pull Request #10241 · linode/manager

bnussman-akamai · 2024-02-29T21:05:19Z

Description 📝

Based on our discussion, we decided that our own Query Key factory was slowly becoming more like @lukemorales/query-key-factory so we are going to proceed with @lukemorales/query-key-factory 🏭
This PR updates profile queries to use the new query key factory 🎉
Fixes duplicate GET /v4/profile when Cloud Manager loads
If we are happy with how this looks, we will start using this and refactoring old query keys!

Preview 📷

How to test 🧪

Checkout this PR
Test all profile related features 👤
Use the React Query dev tools and verify profile query keys look as expected 🔧
Verify that parent child features still work 👪

As an Author I have considered 🤔

…ries

bnussman-akamai · 2024-02-29T21:15:38Z

packages/manager/src/queries/base.ts

 // =============================================================================
-type QueryConfigTypes = 'longLived' | 'noRetry' | 'oneTimeFetch' | 'shortLived';
-
-export const queryPresets: Record<QueryConfigTypes, UseQueryOptions<any>> = {


UseQueryOptions<any> is less type-safe than letting typescript do the inference

bnussman-akamai · 2024-02-29T21:17:14Z

packages/manager/src/hooks/useInitialRequests.ts

      // Username and whether a user is restricted
-      queryClient.prefetchQuery({
-        queryFn: () => getProfile(),
-        queryKey: ['profile'],


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.

github-actions · 2024-02-29T21:26:39Z

Coverage Report: ✅
Base Coverage: 81.28%
Current Coverage: 81.29%

hkhalil-akamai

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.

abailly-akamai

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 via queryClient.invalidateQueries(profileQueries.profile().queryKey);
how nesting works with the factory
queries best practice (invalidation etc)

any thoughts?

bnussman-akamai · 2024-03-04T14:46:46Z

I'm happy do document all of that! @abailly-akamai

Would it make sense to use the docs site for this?

abailly-akamai · 2024-03-04T14:53:50Z

@bnussman thank you! and yes, i think it would make sense to have a new doc site page dedicated to it

bnussman-akamai · 2024-03-04T19:05:52Z

@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

mjac0bs

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.

docs/tooling/react-query.md

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

abailly-akamai

Thanks for adding the docs - excited to see this moving forward!

I will make a ticket to update the placement groups queries 👍

…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

initial refactor

087db45

bnussman-akamai added Enhancement React Query Relating to the transition to use React Query labels Feb 29, 2024

bnussman-akamai requested review from abailly-akamai and hkhalil-akamai February 29, 2024 21:05

bnussman-akamai self-assigned this Feb 29, 2024

bnussman-akamai requested a review from a team as a code owner February 29, 2024 21:05

bnussman-akamai requested review from cpathipa and mjac0bs and removed request for a team February 29, 2024 21:05

Added changeset: Use @lukemorales/query-key-factory for Profile Que…

1cd39ae

…ries

bnussman-akamai commented Feb 29, 2024

View reviewed changes

update e2e test to account for new invalidation

17c19f8

bnussman-akamai requested a review from a team as a code owner February 29, 2024 23:44

bnussman-akamai requested review from jdamore-linode and removed request for a team February 29, 2024 23:44

hkhalil-akamai approved these changes Mar 2, 2024

View reviewed changes

abailly-akamai reviewed Mar 4, 2024

View reviewed changes

bnussman added 2 commits March 4, 2024 12:48

update existing docs

cd38565

initial docs

bbb41a5

bnussman-akamai requested a review from abailly-akamai March 4, 2024 20:54

mjac0bs approved these changes Mar 4, 2024

View reviewed changes

Apply suggestions from code review

7a01879

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

abailly-akamai approved these changes Mar 4, 2024

View reviewed changes

bnussman-akamai merged commit e1c13bb into linode:develop Mar 4, 2024

This was referenced Mar 18, 2024

Release v1.115.0 - release → staging #10292

Merged

Release v1.115.0 - staging → master #10293

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: [M3-7437] - Use `@lukemorales/query-key-factory` for Profile Queries#10241

refactor: [M3-7437] - Use `@lukemorales/query-key-factory` for Profile Queries#10241
bnussman-akamai merged 6 commits intolinode:developfrom
bnussman-akamai:M3-7437-use-query-key-factory-for-profile-queries

bnussman-akamai commented Feb 29, 2024 •

edited

Loading

Uh oh!

bnussman-akamai Feb 29, 2024

Uh oh!

bnussman-akamai Feb 29, 2024

Uh oh!

github-actions bot commented Feb 29, 2024 •

edited

Loading

Uh oh!

hkhalil-akamai left a comment

Uh oh!

abailly-akamai left a comment

Uh oh!

bnussman-akamai commented Mar 4, 2024

Uh oh!

abailly-akamai commented Mar 4, 2024

Uh oh!

bnussman-akamai commented Mar 4, 2024

Uh oh!

mjac0bs left a comment •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

abailly-akamai left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

bnussman-akamai commented Feb 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description 📝

Preview 📷

How to test 🧪

As an Author I have considered 🤔

Uh oh!

bnussman-akamai Feb 29, 2024

Choose a reason for hiding this comment

Uh oh!

bnussman-akamai Feb 29, 2024

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Feb 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hkhalil-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

abailly-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

bnussman-akamai commented Mar 4, 2024

Uh oh!

abailly-akamai commented Mar 4, 2024

Uh oh!

bnussman-akamai commented Mar 4, 2024

Uh oh!

mjac0bs left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

abailly-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

bnussman-akamai commented Feb 29, 2024 •

edited

Loading

github-actions bot commented Feb 29, 2024 •

edited

Loading

mjac0bs left a comment •

edited

Loading