Skip to content
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

[legacy-framework] Breaking: Upgrade React Query to v2 #720

Merged
merged 4 commits into from Jul 1, 2020

Conversation

toshi1127
Copy link
Collaborator

@toshi1127 toshi1127 commented Jun 29, 2020

This PR closes the issue of Upgrade React Query to v2. blitz-js/legacy-framework#691

What are the changes and their implications?

  • To update React Query, I have fixed the implementation to accommodate some breaking changes.

Affected Change List

  1. The new way to do dependent queries to instead use the enabled config flag. You should move your conditions in your key to the enabled option
    • Before
      useQuery(ready && queryKey, queryFn)

    • After
      useQuery(queryKey, queryFn, { enabled: ready })
  2. If you use functions as query keys that can potentially throw, you should migrate their logic to the enabled config option and use optional chaining to cast them to a boolean
    • Before
      useQuery(() => ['user', user.id], queryFn)

    • After
      useQuery(['user', user?.id], queryFn, { enabled: user?.id })
  3. refetchQueries has been renamed to invalidateQueries. You will need make this rename change for your app to continue working propertly. The name change comes due to some differences in what the function does.
    • Before, any queries that matched the queryKey used in refetchQueries(queryKey) and were also stale, would be refetched... even queries that were inactive and not rendered on the screen. This resulted in quite a few queries being refetched regardless of their immediate necessity.
    • Now, with invalidateQueries, only queries that are actively rendered will be refetched, while any other matching queries will forcefully be marked as stale.
  4. The type of isFetchingMore in InfiniteQueryResult has been changed from boolean to false | 'previous' | 'next'.

Checklist

@toshi1127 toshi1127 requested a review from flybayer as a code owner June 29, 2020 15:51
@blitzjs-bot blitzjs-bot bot added this to In Review in Dashboard Jun 29, 2020
Copy link
Member

@flybayer flybayer left a comment

Choose a reason for hiding this comment

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

Awesome, thank you! Can you also open a PR to https://github.com/blitz-js/blitzjs.com to update the needed doc changes?

@@ -22,7 +22,7 @@ const Products = () => {
))}

<div>
<button onClick={() => fetchMore()} disabled={!canFetchMore || isFetchingMore}>
<button onClick={() => fetchMore()} disabled={!canFetchMore || !!isFetchingMore}>
Copy link
Member

Choose a reason for hiding this comment

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

Why this change?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This is because the type of disabled is a boolean but the type of isFetchingMore has been changed from boolean to false | 'previous' | 'next'.

@@ -43,7 +43,7 @@
"@blitzjs/config": "0.15.3",
"@blitzjs/display": "0.15.3",
"pretty-ms": "6.0.1",
"react-query": "1.5.8",
"react-query": "^2.4.4",
Copy link
Member

Choose a reason for hiding this comment

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

This needs pinned to an exact version :)

Suggested change
"react-query": "^2.4.4",
"react-query": "2.4.4",

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Fixed

@flybayer
Copy link
Member

By the way, always make sure your PRs have Closes blitz-js/legacy-framework#691 instead of just #712. It has to have closes or else the issue won't automatically be closed when the PR is merged :)

@toshi1127
Copy link
Collaborator Author

@flybayer
Of course !!
Created a PR to update the documentation.

Copy link
Member

@flybayer flybayer left a comment

Choose a reason for hiding this comment

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

Great, thank you!

@flybayer flybayer changed the title Upgrade React Query to v2 Breaking: Upgrade React Query to v2 Jul 1, 2020
@flybayer flybayer merged commit 9e75a75 into blitz-js:canary Jul 1, 2020
Dashboard automation moved this from In Review to Done Jul 1, 2020
@dillondotzip dillondotzip changed the title Breaking: Upgrade React Query to v2 [legacy-framework] Breaking: Upgrade React Query to v2 Jul 7, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

None yet

2 participants