This PR adds useApiData and useApiRequest hooks for easily requesting data from the API.
Note: this depends on #88; that PR should be merged before this one.
Usage
To fetch data to use in a component, simply use:
import { useApiData } from '../../api';
const MyComponent: React.FC = () => {
const { data, error } = useApiData('api-route'); // 'data' and 'error' are either Objects or `undefined`; never promises or anything like that
return (
<div>
{ JSON.Stringify(data) }
</div>
);
}
The useApiData hook uses swr to implement caching, revalidation, and automatic retries.
To manually make API requests in a component without any of these features, use the useApiRequest hook instead.
Under the hood, it uses Zeit's swr library along with a fetch ponyfill.
Right now, there is no support for authentication, so all requests return the same JSON response:
{"detail":"Authentication credentials were not provided."}
A future (very soon) PR, which implements the client authentication flow, will update this useApi hook to automatically leverage API tokens added to the global application store.
This PR adds
useApiData
anduseApiRequest
hooks for easily requesting data from the API.Note: this depends on #88; that PR should be merged before this one.
Usage
To fetch data to use in a component, simply use:
The
useApiData
hook usesswr
to implement caching, revalidation, and automatic retries.To manually make API requests in a component without any of these features, use the
useApiRequest
hook instead.Details
Under the hood, it uses Zeit's
swr
library along with afetch
ponyfill.Right now, there is no support for authentication, so all requests return the same JSON response:
A future (very soon) PR, which implements the client authentication flow, will update this
useApi
hook to automatically leverage API tokens added to the global application store.