Outline and document the use of react-router and react-query to load and manage asynchronous data state, using orval to generate the API client

[devraj]

Orval is a restful client generator for Typescript with documentation for React. It does use Axios under the hood, while being an added layer could bring utilities like interceptors.

OTC our preferred project at the moment seems to be unmaintained.

The proposal is to evaluate this library and prototype a sample and decide if it's worthwhile moving to this project.

If this is accepted then we have to redo our documentation and ensure this permeates through projects that are using the current approach.

Note the documentation has references to react-query which would have to be evaluated and what it does to our process

[devraj]

On initial investigation, the project is certainly more active. The generator writes an axios dependent API client by default with validation of requests and responses, the CLI is easy enough to run and has options for generating a single file or multiple.

Some standout features:

• Integration with mocking infrastructure
• Integration with react-query which seems to be a really nice solution for caching and data state management
• Docs are up to scratch which is always a good sign
• Provides a set of developer tools

#13 and #14 had aspirations to allow OTC generated clients to handle events at a global level e.g on authorization failure do something, while we can engineer the infrastructure around it buying into react-query might assist perform some of the heavy lifting.

The proposal would be to move to:

• react-query + orval generating clients
• update the docs to reflect this
• drop otc and autorest as recommendations

[devraj]

Orval is accepted as a plugin.

This ticket is being renamed to reflect the use of react-query and react-router to work together in loading data and orval generating an API client for react-query

[devraj]

This has been mostly prototyped and merged into master, the integration examples follows from this tutorial with the exception that we have orval generating the api client for us.

My implementation has the following differences:

• Example uses useLoader in the editor screen to load data, but I am using useGetUserById which is an orval thing, is this correct
• Examples use {user?.firstName} where as I am having to do {user?.data.firstName}, where am I going wrong?
• The edit and create endpoints are the same, the example creates a mock object which gets an ID and then uses the edit endpoint, in this example it's talking to a server and has a different endpoint. This ought to be reviewed
• The destroy action does not pass an id (or not that I can see) in the tutorial, my examples does pass an id, I just need to revise and see what the difference is.

[devraj]

Studying this syntax essentially the values from the response are being assigned to the isLoading, error and data variables.

const { isLoading, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: () =>
      fetch('https://api.github.com/repos/tannerlinsley/react-query').then(
        (res) => res.json(),
      ),
  })

Using orval means we are wrapping the useQuery hook made available by react-query with axios hence the data object has headers a nested data object.