This repository has been archived by the owner on Oct 26, 2023. It is now read-only.
Migrates to using react-router 6.4 and react-query to manage asynchronous state #22
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 outlines how we are going to drop the use of autorest and otc and head towards generating clients using orval and then use react-query and react-router's new loading features to maintain application state.
drops the use of otc and autorest api calls, moving towards using react-query and orval to generate the api client that will be used by react-query
sets out the paradigm for end to end testing using playwright including a github action
react-router 6.4 completely changes the way we configure the routes and introduces loaders and actions, this is also paired with react-query and it's developer tools, we will conduct the exercise of migrating to the new paradigm and make the two libraries work with each other
orval can read from a web server but can't ignore tls warnings, which is raised with the development server, the endpoint is now configured to read straight from the docker container which is running http not https
we've decided to move to snake casing for package names, inspired by all that is published on npm. for components the files are snake cased with the components in pascal case, this also sings to our unix way of life
this commit gets the editing of a user profile working with react-query and react-router, there are still a few questions around the use of the useGetUserById hook as opposed to useLoaderData which is what the examples show. note that we use orval to generate the client that provides these hooks, it will be a matter of cross referencing the documentation and making our official note as to how to use the three frameworks together
note that the forms have no validation at the moment, still to figure out how to do this with the react-router v6 way. i am still debating if this is the right way of doing things, and if we should be able to reuse the edit form, however depending on the ui this can be different per application
delete event has been wired up, it differs from the example where by the id has been passed in the url, and the sample does not require to do this post this commit we will merge the branch in and leave notes on the ticket to explore the edge cases and then document what we require
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Our current approach has been to use
autorestorotcto generate the client with great naming convention and then useContextorpropsto manage the state of the data. The approach is similar to what the team had been doing earlier (where they had made their own hooks to manage states). The problem becomes rather large, very quickly with problems like:What started as an investigation in #21 to find a replacement for
OTCas the project seems to be abandoned and findingorvalas a suitable replacement turned into outlining how we manage state properly.React Router 6.4 adds data loading, and orval is able to generate an API client that is compatible with
react-query, the following pull request provides a refactored template of how to query the API usingreact-queryandreact-routerwhile still maintaining beautifully readable code.The key points of these changes are:
react-routerto trigger loading queries when the routes are accessedreact-queryto store and manage the asynchronous stateorvalto generate the API client