chore(nodejs): upgrade to React Query v5 #1156
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This version has some fairly major changes, but most of it is hidden from us thanks to Orval. We have made the following notable changes, however: * `cacheTime` has been renamed to `gcTime`. As far as I can tell, there are no behavioral changes and this is simply a rename to reduce confusion. Therefore, this change should be purely cosmetic. (See TanStack/query#4678, TanStack/query#1217, and TanStack/query#4829 for reference.) * Use object-style parameters to query methods where necessary. These changes should be purely cosmetic. * React Query v5 is written in TypeScript, so we can take advantage of better types. The one place we currently do that is in the `Edit` component's `useGetProgram` return types. Note that we also use `isPending` rather than `isLoading`. The docs are a bit confusing on this point as to whether they're equivalent; see https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5#status-loading-has-been-changed-to-status-pending-and-isloading-has-been-changed-to-ispending-and-isinitialloading-has-now-been-renamed-to-isloading. Initially I used `isLoading` when porting to v5, but TypeScript was not able to narrow the `data` value to non-nil unless I use `isPending`, so I've gone with `isPending` in the end. As far as I can tell, it works the same as before. * v5's dev tools are significantly improved, including the UI, which lets you choose via a nice drop-down menu where to locate the tool pop-up. This doesn't play well with our own "dev tools" checkbox UI, so I've temporarily disabled those `DevOptions`, as the UI for them will need to be rethought. I think adding another button to the canvas is probably the way to go, but I'll leave that work for later. FYI, the migration guide is here, and it informed most of these changes: https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5 Signed-off-by: Drew Hess <[email protected]>
dhess
force-pushed
the
dhess/upgrade-react-query
branch
from
3d4e526 to
3726e3f
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This version has some fairly major changes, but most of it is hidden from us thanks to Orval. We have made the following notable changes, however:
cacheTimehas been renamed togcTime. As far as I can tell, there are no behavioral changes and this is simply a rename to reduce confusion. Therefore, this change should be purely cosmetic. (See rename cacheTime TanStack/query#4678,Consider renaming cacheTime TanStack/query#1217, and Rename cacheTime to gcTime TanStack/query#4829 for reference.)
Use object-style parameters to query methods where necessary. These changes should be purely cosmetic.
React Query v5 is written in TypeScript, so we can take advantage of better types. The one place we currently do that is in the
Editcomponent'suseGetProgramreturn types. Note that we also useisPendingrather thanisLoading. The docs are a bit confusing on this point as to whether they're equivalent; seehttps://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5#status-loading-has-been-changed-to-status-pending-and-isloading-has-been-changed-to-ispending-and-isinitialloading-has-now-been-renamed-to-isloading. Initially I used
isLoadingwhen porting to v5, but TypeScript was not able to narrow thedatavalue to non-nil unless I useisPending, so I've gone withisPendingin the end. As far as I can tell, it works the same as before.v5's dev tools are significantly improved, including the UI, which lets you choose via a nice drop-down menu where to locate the tool pop-up. This doesn't play well with our own "dev tools" checkbox UI, so I've temporarily disabled those
DevOptions, as the UI for them will need to be rethought. I think adding another button to the canvas is probably the way to go, but I'll leave that work for later.FYI, the migration guide is here, and it informed most of these changes:
https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5