refactor: [M3-7440] - Upgrade to TanStack Query v4 #10236

bnussman-akamai · 2024-02-28T17:04:59Z

Description 📝

Updates us to React Query v4 (now called TanStack Query) 🎉
We are doing this so we can start using https://github.com/lukemorales/query-key-factory 🏭
- We must upgrade first because query-key-factory isn't compatible with legacy React Query
The main changes are 🔧
- Switching react-query to @tanstack/react-query
- All queryKeys must be arrays (not string)
This PR does not attempt to make any clean up or improvement, it's goal is to just upgrade us without breaking anything.

Preview 📷

Note

No UI changes expected

How to test 🧪

Verify that all changes to queryKeys don't cause functionality regressions
Verify that all automated checks pass (especially e2es and unit tests)

As an Author I have considered 🤔

github-actions · 2024-02-28T17:57:07Z

Coverage Report: ❌
Base Coverage: 81.34%
Current Coverage: 81.32%

hkhalil-akamai

Thanks for tackling this upgrade. It looks like there is now a TanStack Query v5 -- would it be worth upgrading to v5 now?

hkhalil-akamai · 2024-02-28T19:51:57Z

...r/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx

@@ -242,7 +242,7 @@ export const DatabaseSummaryConnectionDetails = (props: Props) => {
          <Typography>
            <span>password</span> = {password}
          </Typography>
-          {credentialsLoading ? (


Is this a related change?

Looks like if a query is mounted with enabled: false, isLoading is now true. Previously, it was false. We'll have to look out for any other places where this braking change causes issues.

See https://tanstack.com/query/v4/docs/framework/react/guides/migrating-to-react-query-4#disabled-queries

Huh that's a curious implementation decision from the library.

hkhalil-akamai · 2024-02-28T19:53:19Z

packages/manager/src/features/Profile/APITokens/EditAPITokenDrawer.test.tsx

Are changes in this file related?

They are an attempt to fix the existing flake caused by this test. I figured it wouldn't hurt.

hkhalil-akamai · 2024-02-28T19:57:24Z

packages/manager/src/utilities/subnets.ts

@@ -90,13 +90,13 @@ const isValidRFC1918IPv4 = (address: string) => {
  // 192.168.x.x (192.168/16 prefix)
  return (
    // check for valid 10.x IPs
+    // check for valid 192.x IPs


Hmm.. this might have been accidental

I think the pre-commit hooks did this.

Should the comment be moved back to the original location?

hkhalil-akamai · 2024-02-28T19:59:59Z

Thanks for tackling this upgrade. It looks like there is now a TanStack Query v5 -- would it be worth upgrading to v5 now?

Nvm, I just saw your comment on #10207. I'm good with moving to v4 first.

bnussman-akamai · 2024-02-28T20:24:59Z

We won't do v5 just yet because it has even more breaking changes. I think the logical order for us will be

Update to v4
Implement a Query Key factory and clean up things (as we do this, we can prepare for the v5 breaking change https://tanstack.com/query/v5/docs/framework/react/guides/migrating-to-v5#supports-a-single-signature-one-object)
Update to v5

hkhalil-akamai

Thanks for handling this upgrade! Did some local testing but overall am satisfied with E2E tests passing. The single failure looks unrelated.

abailly-akamai

Ran tests, reviewed changes and tested the application locally. All good from my vantage point ✅

Thanks for the update, excited to see our query key factory implemented as a follow up! 🎉

bnussman added 2 commits February 28, 2024 11:53

initial refactor

b4493a4

update

9936311

bnussman-akamai added the Work in Progress label Feb 28, 2024

bnussman-akamai self-assigned this Feb 28, 2024

bnussman-akamai marked this pull request as ready for review February 28, 2024 17:11

bnussman-akamai requested a review from a team as a code owner February 28, 2024 17:11

bnussman-akamai requested review from mjac0bs and jaalah-akamai and removed request for a team February 28, 2024 17:12

Added changeset: Upgrade to TanStack Query v4

0ac9ade

bnussman-akamai requested review from abailly-akamai and hkhalil-akamai February 28, 2024 17:24

fix: linode backups render order bug

a31fcfc

bnussman-akamai changed the title ~~refactor: Upgrade to TanStack Query v4~~ refactor: [M3-7440] - Upgrade to TanStack Query v4 Feb 28, 2024

bnussman added 2 commits February 28, 2024 12:51

try to fix test flake in EditAPITokenDrawer.test.tsx

997ab19

try to fix test flake in EditAPITokenDrawer.test.tsx

3b012ff

fix: dbaas query keys and show button

1f135ef

hkhalil-akamai reviewed Feb 28, 2024

View reviewed changes

hkhalil-akamai approved these changes Feb 28, 2024

View reviewed changes

fix: obj file upload (we must create new object)

340caac

bnussman-akamai added Add'tl Approval Needed Waiting on another approval! React Query Relating to the transition to use React Query and removed Work in Progress labels Feb 28, 2024

bnussman added 2 commits February 28, 2024 17:25

revert clean up to prevent breaking changes

3f9e561

specify the exact react query version

ff88cf2

abailly-akamai approved these changes Feb 29, 2024

View reviewed changes

bnussman-akamai removed the Add'tl Approval Needed Waiting on another approval! label Feb 29, 2024

bnussman-akamai added Wait to Merge Approved Multiple approvals and ready to merge! labels Feb 29, 2024

bnussman-akamai mentioned this pull request Feb 29, 2024

change: [M3-7437] - Update Profile Queries to use Query Key Factory #10207

Closed

12 tasks

bnussman-akamai removed the Wait to Merge label Feb 29, 2024

bnussman-akamai merged commit 1045e22 into linode:develop Feb 29, 2024
18 checks passed

This was referenced Mar 18, 2024

Release v1.115.0 - release → staging #10292

Merged

Release v1.115.0 - staging → master #10293

Merged

hkhalil-akamai mentioned this pull request Mar 22, 2024

fix: [M3-7862] - Fix display of TagsPanel in read-only entities #10275

Merged

12 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: [M3-7440] - Upgrade to TanStack Query v4 #10236

refactor: [M3-7440] - Upgrade to TanStack Query v4 #10236

bnussman-akamai commented Feb 28, 2024 •

edited

github-actions bot commented Feb 28, 2024 •

edited

hkhalil-akamai left a comment

hkhalil-akamai Feb 28, 2024

bnussman-akamai Feb 28, 2024

hkhalil-akamai Feb 28, 2024

hkhalil-akamai Feb 28, 2024

bnussman-akamai Feb 28, 2024

hkhalil-akamai Feb 28, 2024

bnussman-akamai Feb 28, 2024

hkhalil-akamai Feb 28, 2024

hkhalil-akamai commented Feb 28, 2024 •

edited

bnussman-akamai commented Feb 28, 2024

hkhalil-akamai left a comment

abailly-akamai left a comment

refactor: [M3-7440] - Upgrade to TanStack Query v4 #10236

refactor: [M3-7440] - Upgrade to TanStack Query v4 #10236

Conversation

bnussman-akamai commented Feb 28, 2024 • edited

Description 📝

Preview 📷

How to test 🧪

As an Author I have considered 🤔

github-actions bot commented Feb 28, 2024 • edited

hkhalil-akamai left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hkhalil-akamai commented Feb 28, 2024 • edited

bnussman-akamai commented Feb 28, 2024

hkhalil-akamai left a comment

Choose a reason for hiding this comment

abailly-akamai left a comment

Choose a reason for hiding this comment

bnussman-akamai commented Feb 28, 2024 •

edited

github-actions bot commented Feb 28, 2024 •

edited

hkhalil-akamai commented Feb 28, 2024 •

edited