|
1 | | -# Api |
| 1 | +# `restii` |
2 | 2 |
|
3 | | -This repository contains API functionality extracted from the d1g1t UI's `api` layer. |
| 3 | +Energize your REST API 🌿 with React hooks and a centralized cache. |
| 4 | + |
| 5 | +   |
| 6 | + |
| 7 | +## Features |
| 8 | + |
| 9 | +- 🚀 A set of React hooks for querying HTTP API data |
| 10 | +- 💾 Turnkey API response caching |
| 11 | +- 🖇 Parallel request de-duplication |
| 12 | +- 📡 Support for API requests and cache queries outside of React components (in sagas, thunks, etc.) |
| 13 | +- 📥 Parses response bodies of any data type (`'json'`, `'blob'`, `'text'`) |
| 14 | +- 💡 Designed with full Typescript support |
| 15 | + |
| 16 | +## Motivation |
| 17 | + |
| 18 | +At [d1g1t](https://github.com/d1g1tinc), we make over 400 REST API calls in our enterprise investment advisor platform. Over time, as we started using React hooks and wanted to introduce caching optimizations, it was clear that we needed to overhaul our internal REST API fetching library to use patterns that scale with our app. |
| 19 | + |
| 20 | +`restii` synthesizes patterns from other libraries, such as [`apollo-client`](https://www.apollographql.com/docs/react/), [`swp`](https://github.com/zeit/swr), and [`react-query`](https://github.com/tannerlinsley/react-query). The primary difference is that it's specifically designed for making HTTP calls to your API. It allows you to request API data with URL paths, query parameters, request bodies, and HTTP headers. The caching layer will deterministically map these HTTP request parameters to response bodies, allowing the user to easily query their API and defer caching logic to `restii`. |
| 21 | + |
| 22 | +Since it works well for d1g1t's purposes, we decided to open-source the library to help others who are building a REST API-consuming React application. |
| 23 | + |
| 24 | +## Basic Usage |
| 25 | + |
| 26 | +Query your API (ex. fetching a user's profile): |
| 27 | + |
| 28 | +```jsx |
| 29 | +import React from 'react' |
| 30 | +import {useApiQuery} from 'restii' |
| 31 | + |
| 32 | +const MyComponent = (props) => { |
| 33 | + const [userQuery] = useApiQuery({url: `/users/${props.userId}`}) |
| 34 | + |
| 35 | + if (userQuery.error) { |
| 36 | + // display error |
| 37 | + } |
| 38 | + |
| 39 | + if (userQuery.loading) { |
| 40 | + // display loading state |
| 41 | + } |
| 42 | + |
| 43 | + return <h1>{userQuery.data.firstName}</h1> |
| 44 | +} |
| 45 | +``` |
| 46 | + |
| 47 | +As you start adding more API requests, we strongly recommend organizing your request definitions into centralized "endpoint" classes, grouped by domain/resource. |
| 48 | + |
| 49 | +Continuing our example, we'll create a `UserEndpoints` class to define endpoints under the `'/users'` base path. We'll subclass `restii#HttpEndpoints`, which gives us static HTTP helper methods: |
| 50 | + |
| 51 | +```jsx |
| 52 | +import {HttpEndpoints} from 'restii' |
| 53 | + |
| 54 | +export class UserEndpoints extends HttpEndpoints { |
| 55 | + static basePath = '/users' |
| 56 | + |
| 57 | + static list(query) { |
| 58 | + return super._get('', {query}) |
| 59 | + // {method: 'GET', url: '/users?serializedQuery'} |
| 60 | + } |
| 61 | + |
| 62 | + static create(body) { |
| 63 | + return super._post('', {body}) |
| 64 | + // {method: 'POST', url: '/users'} |
| 65 | + } |
| 66 | + |
| 67 | + static findById(id) { |
| 68 | + return super._get(`/${id}`) |
| 69 | + // {method: 'GET', url: `/users/${id}`} |
| 70 | + } |
| 71 | + |
| 72 | + static update(id, body) { |
| 73 | + return super._put(`/${id}`, {body}) |
| 74 | + // {method: 'PUT', url: `/users/${id}`, body} |
| 75 | + } |
| 76 | + |
| 77 | + static partialUpdate(id, body) { |
| 78 | + return super._patch(`/${id}`, {body}) |
| 79 | + // {method: 'PATCH', url: `/users/${id}`, body} |
| 80 | + } |
| 81 | + |
| 82 | + static destroy(id) { |
| 83 | + return super._delete(`/${id}`) |
| 84 | + // {method: 'DELETE', url: `/users/${id}`} |
| 85 | + } |
| 86 | + |
| 87 | + // ad-hoc, custom request: |
| 88 | + static requestPasswordReset(id, resetToken, body) { |
| 89 | + return super._post(`/users/${id}`, { |
| 90 | + body, |
| 91 | + headers: {'x-reset-token': resetToken} |
| 92 | + }) |
| 93 | + // {method: 'POST', url: `/users/${id}`, headers: {'x-reset-token': resetToken}, body} |
| 94 | + } |
| 95 | +} |
| 96 | +``` |
| 97 | + |
| 98 | +If your endpoints follow common REST-ful conventions, you can subclass `restii#RestEndpoints` (which subclasses `restii#HttpEndpoints`) to reduce REST boilerplate: |
| 99 | + |
| 100 | +```jsx |
| 101 | +import {RestEndpoints} from 'restii' |
| 102 | + |
| 103 | +export class UserEndpoints extends RestEndpoints { |
| 104 | + static basePath = '/users' |
| 105 | + |
| 106 | + static list(query) { |
| 107 | + return super._list(query) |
| 108 | + } |
| 109 | + |
| 110 | + static create(body) { |
| 111 | + return super._create(body) |
| 112 | + } |
| 113 | + |
| 114 | + static findById(id) { |
| 115 | + return super._findById(id) |
| 116 | + } |
| 117 | + |
| 118 | + static update(id, body) { |
| 119 | + return super._update(id, body) |
| 120 | + } |
| 121 | + |
| 122 | + static partialUpdate(id, body) { |
| 123 | + return super._partialUpdate(id, body) |
| 124 | + } |
| 125 | + |
| 126 | + static destroy(id) { |
| 127 | + return super._destroy(id) |
| 128 | + } |
| 129 | + |
| 130 | + static requestPasswordReset(id, resetToken, body) { |
| 131 | + return super._post(`/users/${id}`, { |
| 132 | + body, |
| 133 | + headers: {'x-reset-token': resetToken} |
| 134 | + }) |
| 135 | + } |
| 136 | +} |
| 137 | +``` |
| 138 | + |
| 139 | +Then you can use these endpoints to make queries: |
| 140 | + |
| 141 | +```jsx |
| 142 | +import React from 'react' |
| 143 | +import {useApiQuery} from 'restii' |
| 144 | + |
| 145 | +import {UserEndpoints} from 'my-app/endpoints' |
| 146 | + |
| 147 | +const MyComponent = (props) => { |
| 148 | + const [usersQuery] = useApiQuery(UserEndpoints.list({limit: 10})) |
| 149 | + const [userQuery] = useApiQuery(UserEndpoints.findById(props.userId)) |
| 150 | + // ... etc |
| 151 | +} |
| 152 | +``` |
| 153 | + |
| 154 | +To make one-off requests (ie. form submissions, deletions, etc), you can use the `Api` client instance directly: |
| 155 | + |
| 156 | +```jsx |
| 157 | +import React, {useState} from 'react' |
| 158 | +import {useApi} from 'restii' |
| 159 | + |
| 160 | +import {UserEndpoints} from 'my-app/endpoints' |
| 161 | + |
| 162 | +const DeleteUser = (props) => { |
| 163 | + const api = useApi() |
| 164 | + const [deleting, setDeleting] = useState(false) |
| 165 | + |
| 166 | + const handleDelete = async () => { |
| 167 | + setDeleting(true) |
| 168 | + |
| 169 | + try { |
| 170 | + await api.request(UserEndpoints.destroy(props.userId)) |
| 171 | + // navigate to a different page, etc. |
| 172 | + } catch (error) { |
| 173 | + // handle error |
| 174 | + } finally { |
| 175 | + setDeleting(false) |
| 176 | + } |
| 177 | + } |
| 178 | + |
| 179 | + return ( |
| 180 | + <> |
| 181 | + <button type='button' onClick={handleDeleteUser} disabled={deleting}> |
| 182 | + Delete User |
| 183 | + </button> |
| 184 | + </> |
| 185 | + ) |
| 186 | +} |
| 187 | +``` |
| 188 | + |
| 189 | +## Installation & Setup |
| 190 | + |
| 191 | +Install the package as a dependency: |
| 192 | + |
| 193 | +```bash |
| 194 | +npm install --save restii |
| 195 | + |
| 196 | +# or |
| 197 | + |
| 198 | +yarn add restii |
| 199 | +``` |
| 200 | + |
| 201 | +Create an `Api` instance and provide it to your app: |
| 202 | + |
| 203 | +```jsx |
| 204 | +import {Api, ApiProvider} from 'restii' |
| 205 | + |
| 206 | +const api = new Api({ |
| 207 | + // ↓ prefixes all request urls |
| 208 | + baseUrl: 'http://your-api.com' |
| 209 | +}) |
| 210 | + |
| 211 | +const App = () => ( |
| 212 | + <ApiProvider api={api}>{/* render your app here */}</ApiProvider> |
| 213 | +) |
| 214 | +``` |
| 215 | + |
| 216 | +You can now start defining endpoints and making requests in your app. |
| 217 | + |
| 218 | +## Guide |
| 219 | + |
| 220 | +### Caching |
| 221 | + |
| 222 | +#### How cache data is keyed |
| 223 | + |
| 224 | +TODO explain how requests are deterministically keyed for caching (without request body) |
| 225 | + |
| 226 | +#### Using the cache when requesting data |
| 227 | + |
| 228 | +TODO explain how to use `fetchPolicy` |
| 229 | + |
| 230 | +#### Writing to the cache directly |
| 231 | + |
| 232 | +TODO |
| 233 | + |
| 234 | +### Dependent queries |
| 235 | + |
| 236 | +TODO |
| 237 | + |
| 238 | +### Re-fetching a query |
| 239 | + |
| 240 | +TODO |
| 241 | + |
| 242 | +### Custom response body parsing |
| 243 | + |
| 244 | +TODO |
| 245 | + |
| 246 | +### Custom query string serialization |
| 247 | + |
| 248 | +TODO |
| 249 | + |
| 250 | +### Setting default headers (ie. an auth token) for all requests |
| 251 | + |
| 252 | +TODO |
| 253 | + |
| 254 | +### Typescript |
| 255 | + |
| 256 | +TODO |
| 257 | + |
| 258 | +## Comparison to similar libraries |
| 259 | + |
| 260 | +TODO: add comparisons to `react-query`/`swr`, `rest-hooks`, `apollo-graphql` (with `apollo-link-rest`) |
| 261 | + |
| 262 | +## Usage with Redux |
| 263 | + |
| 264 | +TODO |
| 265 | + |
| 266 | +## API |
| 267 | + |
| 268 | +TODO |
0 commit comments