Skip to content

React Query Developer's Guide

Jump to bottom
jchuahtacc edited this page Aug 20, 2021 · 15 revisions

React-Query Developer's Guide

The React-Query Milestone replaces the tapis-redux middleware for managing the lifecycle of API requests with the react-query hooks library. The advantages of using this library are:

  • Significantly reduction in boilerplate code, compared to using react-redux-saga
  • Opinionated, hooks-based method for performing results caching, pagination, re-fetching
  • Least-concerns approach for UI components tracking their own state

In addition, this milestone will include other refactors for improved code maintainability:

  • Use of the create-react-app boilerplate, with more strict Typescript type-checking, better hot-loader configuration and test watcher
  • Removal of external configuration and callback hooks on tapis-ui components, to simplify development (now that external webcomponents is no longer a primary objective of this project)
  • Standardized tapis-ui component wrappers to simplify development of new components and provide consistency (soon to be implemented)
  • Removed src folder structure and integrated tests, for simplified code management

tapis-api

Calls to tapis-typescript are now wrapped in utility functions contained in the tapis-api module. The exports of these functions are promises on the results that also provide error json decoding, should a standard TAPIS 4-stanza response be provided on a failed API call. As an example, we will look at the structure of the login function for the Authenticator module.

Wrapper functions should accept a single dictionary parameter

Each TAPIS function wrapper should have one parameter, that is an object containing fields for values. This allows adaptation for React-Query's useMutation or useQuery hooks. (This should be consistent for all tapis-api wrapper functions, and should be corrected in #126). The dictionary type should be defined as an interface. See LoginParams.

Wrapper functions should return a Promise

Each TAPIS function wrapper should be declared to return a Promise of the wrapped function return type. See 'login'. In the case of the login function, the createToken function returns the RespCreateToken type, so the login wrapper should return a Promise of that type.

Wrapper functions should use the apiGenerator and errorDecoder utils

To avoid boilerplate and provide consistency between wrappers, the apiGenerator and errorDecoder generic utility functions should be used.

apiGenerator generates an API objects that have an injected module configuration. The call to apiGenerator requires the tapis-typescript modules as parameters, including a basePath tenant URL configuration as well as an optional jwt token.

errorDecoder provides promise based handling of any errors generated by tapis-typescript calls. The call to errorDecoder should accept an arrow function as its only parameter. The arrow function should return the result of the tapis-typescript promise function. If the result is a JSON error, it will automatically be decoded.

Clone this wiki locally