Service
We can call it the repository data. This layer handle interaction between store layer and the data layer. The data layer has 2 types, remote and local.
For remote data, we use use-http as our fetch wrapper. This library allow us to make fetch http like fetch do. We can cache the response to to make it reusable, and modify it when needed.
Remote Data
Initially, we provide a default wrapper in AuthContext to pass default header options following backend requirement. Base on use-http documentation, we can pass the default interceptor that contains headers to the use-http Provider. We can pass the base-url too, to the provider. We recommend to use .env variables for the url.
...
const options = { ...customOptions };
...
return (
...
<Provider url="https://<your-url>" options={options}>
...
</Provider>
...
)
...
The blueprint use the use-http in store layer to make it not violence the hook rules.
Usually we take the functions and variables directly from use-http instead pass it to the variable to make the code more clean. Use the function base on HTTP Method that you need. We can use the loading variable too to update the UI.
...
import useFetch from 'use-http';
...
...
const { post, get, put, del, loading, cache, response } = useFetch();
...
For cache, we can directly manage the cache. We can clear the cache and the library will automatically rewrite the cache when we send a request again.
use-http vs use-hook-ts
These libraries have a same fetch wrapper. The difference is use-http is more powerful than use-hook-ts. use-http provide the loading observer and caching and other feature to make http request more efficient and easier.