Set up React Query to simplify state management #5001
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
Overrides prevent an engine mismatch that's safe to ignore til we update Node and ESLint.
Leave TODO note in renderInBackbone — best practice would seem to be to unmount the root when we're done with it to prevent memory leaks
p2edwards
added
UI & UX
https://tanstack.com/query/latest/docs/framework/react/devtools Click the toggle button (bottom right) to open the React Query pane. By default, the button is perhaps overly eye-catching, so I faded it.
Proactively installing so it's available across collab workflow. Wretch is a chainable, configurable `fetch` API wrapper. - https://github.com/elbywan/wretch Useful because: - Throws errors by default, which is useful for React Query functions * - Convenient chainable API - **succinct** - Well-typed - Small size - Can cover our use cases in fetchWrapper and jQuery *: https://tanstack.com/query/latest/docs/framework/react/guides/query-functions#usage-with-fetch-and-other-clients-that-do-not-throw-by-default
Immer makes immutable data structures easier to work with. - https://immerjs.github.io/immer/ Useful because there are places in React and React Query where you need to create a copy of an immutable object with some changes, and Immer can be much easier to write and read than the equivalent spread syntax. - updating state from useState, or using reducers (React) https://react.dev/learn/updating-objects-in-state#write-concise-update-logic-with-immer https://react.dev/learn/updating-arrays-in-state#write-concise-update-logic-with-immer https://react.dev/learn/extracting-state-logic-into-a-reducer#writing-concise-reducers-with-immer - updating a state cache after mutation to avoid re-fetching, or to show optimistic updates (React Query) https://tanstack.com/query/latest/docs/framework/react/guides/updates-from-mutation-responses#immutability https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates#via-the-cache
p2edwards
changed the title
Base automatically changed from
eslint-type-duplicate-imports
to
remove-context-types
July 17, 2024 09:21
jsapp/js/app.jsx
Outdated
| Lower button opacity to be less distracting | ||
| if it shows up in a screenshot. */} | ||
| <style>{'.tsqd-open-btn-container { opacity: 0.1 !important; };'}</style> | ||
| <ReactQueryDevtools /> |
There was a problem hiding this comment.
As per our previous discussion, I think we agreed to comment this out and then merge the PR :)
There was a problem hiding this comment.
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.
Details
This branch sets up React Query and associated tools.
#4992Builds upon this PR stack:
#4985Related issues
Follow up to #4985
Follow up to #4992
Description
Set up React Query to simplify state management on new features. Install additional linter plugins and tools related to React and React Query.
Checklist