[REQ] typescript-react-hooks generator

Is your feature request related to a problem? Please describe.

I generally use openapi-generator with typescript-fetch in react applications. Which ends up looking something like or similar depending on the state management strategy being used.

const api = new PetApi();

useEffect(() => {
   const fetch = async () => {
       const pets = await api.findPetsByStatus({ status: [FindPetsByStatusStatusEnum.Available] });
       // do state things
   }
  fetch();
}, [api])

The popularity of the react hooks api has to lead to the creation of libraries like react-query, axios-hooks and others.

Describe the solution you'd like

Similarly to how openapi-generator provides the option to generate typescript-angular, typescript-rxjs, etc. it would be interesting to provide a typescript-react-hooks to enable a number of the same api conveniences for the react ecosystem.

I can imagine a similar api to one provided in libraries like axios-hooks or react-query

const [{ status, data, error }, findPetsByStatus] = usePetApiFindPetsByStatus();

useEffect(() => {
   findPetsByStatus({ status: [FindPetsByStatusStatusEnum.Available] })
}, [findPetsByStatus])

where the response is a tuple is defined something like

type TupleExample = [PromiseResult<Array<Pet>>, (requestParameters: FindPetsByStatusRequest) => Promise<Array<Pet>>];

type PromiseResult<T> = {
   status: 'loading' | 'error' | 'success';
   data: T;
   error: Error | null;
}

Some of the challenges I acknowledge given the example api above would be the configuration of the underlying api class (eg PetApi). The typescript-fetch generated code provides substantial ability to customize fetch through the use of middlewares etc. Perhaps a React Context could assist with the configuration of the specific api classes?

const config = new Configuration({ 
   fetchApi: customFetch,
   basePath: "someOtherBasePath",
   middleware: [...yourMiddlewaresHere]
})

<OpenAPIProvider configuration={config}>
   <YourComponentUsingGeneratedHook />
</OpenAPIProvider>

Describe alternatives you've considered

None, continue with the current strategy or write custom code to wrap open api generated code in hooks manually.

Additional context

Start by reviewing the existing typescript-fetch, typescript-angular, and typescript-rxjs generators, then compare the proposed hook usage with the cited react-query and axios-hooks APIs. Clarify how generated hooks should expose request results and configure the underlying PetApi, including the proposed OpenAPIProvider. Done means an agreed generator design and implementation scope, with generated TypeScript React hooks covering the demonstrated request flow.