Migrate settings to Tanstack Query #1040
Merged
Conversation
This file contains hidden or 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
lhvy
requested changes
Aug 2, 2025
Contributor
lhvy
left a comment
lhvy
left a comment
There was a problem hiding this comment.
This is a solid start for moving us towards React Query. 🎉
Contributor
|
Let's make this PR just for the settings migration. I'd like to see this roll out sooner rather than later to save an onslaught of merge conflicts. I also want to loop more people into this process - will be easier as multiple branches and PRs. |
jason4193
force-pushed
the
integrate-tanstack-query
branch
2 times, most recently
from
64d6c3c to
0d4f557
Compare
…re-rendering of whole App component
…rsion and dependecies issue
jason4193
force-pushed
the
integrate-tanstack-query
branch
from
257ae92 to
7a2ada4
Compare
lhvy
reviewed
Aug 26, 2025
Contributor
lhvy
left a comment
lhvy
left a comment
There was a problem hiding this comment.
Looks really good to me. Need to discuss and test further over call, plus wait for second review before merging.
mark-trann
requested changes
Aug 27, 2025
Contributor
mark-trann
left a comment
mark-trann
left a comment
There was a problem hiding this comment.
looks really good! Very impressed on your changes - especially making Drag.ts changes
lhvy
approved these changes
Aug 27, 2025
lhvy
changed the title
lhvy
pushed a commit
that referenced
this pull request
Aug 31, 2025
* Install TankStack library with corresponding devtool, integrate into App.tsx * Integrate react query in to setting page * Connect settings.useSquareEdge,useDarkMode,preferredTheme with FE components * Remove use of QueryContext to direct suspense query calling to avoid re-rendering of whole App component * Update all settings to use React Query * Fix FE build error by removing removed AppContext states on components * Remove redudant comments * Add Error Boundary for handling unintented error, resolve packages version and dependecies issue * Remove unwanted comments and resolve naming issues * Resolve setting item destructing before used, and other dependecies issues * Migrate JS fetch to Axios * Remove unwanted library import * Update ErrorBoundary to handle any unknown errors * Resolve build error * Rebase from server-rewrite * Rebase from server-rewrite, with autofix eslint * Refactor Settings component to fit the feat of profile picture * Remove unneccssary commnets * Resolved dropcard shadow logic with react query * Resolve CI build error and lint warnings from drag.ts * Resolve review errors from lucas * Resolve use-prefix issue for settings parameter with minor changes * Resolve review comments from mark * Update the prisma schema for user settings * Update the prisma schema for user settings * Resolve naming error
fox-58
pushed a commit
that referenced
this pull request
Sep 4, 2025
* Install TankStack library with corresponding devtool, integrate into App.tsx * Integrate react query in to setting page * Connect settings.useSquareEdge,useDarkMode,preferredTheme with FE components * Remove use of QueryContext to direct suspense query calling to avoid re-rendering of whole App component * Update all settings to use React Query * Fix FE build error by removing removed AppContext states on components * Remove redudant comments * Add Error Boundary for handling unintented error, resolve packages version and dependecies issue * Remove unwanted comments and resolve naming issues * Resolve setting item destructing before used, and other dependecies issues * Migrate JS fetch to Axios * Remove unwanted library import * Update ErrorBoundary to handle any unknown errors * Resolve build error * Rebase from server-rewrite * Rebase from server-rewrite, with autofix eslint * Refactor Settings component to fit the feat of profile picture * Remove unneccssary commnets * Resolved dropcard shadow logic with react query * Resolve CI build error and lint warnings from drag.ts * Resolve review errors from lucas * Resolve use-prefix issue for settings parameter with minor changes * Resolve review comments from mark * Update the prisma schema for user settings * Update the prisma schema for user settings * Resolve naming error
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.
Description 🧾
Installed FE library TanStack Query and TanStack Query Dev Tools
Constructed FE API directory structure with
/route,/query,mutationfor each/userand/timetableDecided to use
axioslibrary for route calling, for more structural status handling.Migrated use of AppContext for setting toggles to React Query
Implemented an
ErrorBoundaryto catch any status error or unknown computation errors.In progress:
axiosinstead of JS in-builtfetch(Chosen to useaxiosfor more structural Status Handling).AppContext. Since every time any context value updated, whole App will be re-rendered.Testing
Testing for Settings: Access the TanStack Query Dev Tool, when toggling the settings options, there are updates of
[settings]query key, with corresponding FE changes.Checklist
feature: for application feature improvement or new featuresbug: fixing something that previously wasn't workingdev: development-side related changesdocker: updates to the Docker codesetup: changes to the setup/infrastructure of the codebasetest: updates to internal testing