Skip to content

Commit 5f3be78

Browse files
author
keenondrums
committed
0.3.0
1 parent 329fa2c commit 5f3be78

31 files changed

+5527
-2859
lines changed

.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@
22
node_modules
33
*.log*
44
/dist
5-
*.tgz
5+
*.tgz
6+
/coverage

.huskyrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"hooks": {
3+
"pre-commit": "npx lint-staged"
4+
}
5+
}

.lintstagedrc

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"*.{js,ts,tsx,json,css,less,yml}": [
3+
"npx prettier --write",
4+
"git add"
5+
],
6+
"*.md": [
7+
"npx doctoc",
8+
"npx prettier --write",
9+
"git add"
10+
]
11+
}

.npmignore

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
*.idea
21
node_modules
32
*.log*
43
/src
@@ -9,4 +8,5 @@ node_modules
98
.prettierignore
109
.vscode
1110
*.tgz
12-
*.md
11+
*.md
12+
/coverage

.prettierignore

-2
This file was deleted.

.prettierrc

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"trailingComma": "all",
3+
"semi": false,
4+
"singleQuote": true,
5+
"arrowParens": "always",
6+
"printWidth": 120
7+
}

.travis.yml

-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
language: node_js
22
node_js:
33
- 'lts/*'
4-
before_install:
5-
- npm i -g [email protected]
6-
install:
7-
- npm ci
8-
- npm i axios
94
script:
105
- npm run lint
116
- npm test

.vscode/settings.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
{
22
"typescript.tsdk": "node_modules/typescript/lib",
3-
"tslint.nodePath": "node_modules"
4-
}
3+
"tslint.nodePath": "node_modules",
4+
"spellright.language": ["en"],
5+
"spellright.documentTypes": ["markdown", "latex", "plaintext"]
6+
}

README.md

+64-99
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# axios-rest-resource [![Build Status](https://travis-ci.org/keenondrums/axios-rest-resource.svg?branch=master)](https://travis-ci.org/keenondrums/axios-rest-resource)
22

3-
Small library that creates a pre-configured instance of axios to make HTTP requests to REST resources. Written in Typescript. Heavily inspired by AngularJS' $resource.
3+
Schema-based HTTP client powered by axios. Built with Typescript. Heavily inspired by AngularJS' `$resource`.
44

55
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
66
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
@@ -9,8 +9,7 @@ Small library that creates a pre-configured instance of axios to make HTTP reque
99
- [Quick start](#quick-start)
1010
- [URL token substituion](#url-token-substituion)
1111
- [Custom resource schema](#custom-resource-schema)
12-
- [Adavanced usage](#adavanced-usage)
13-
- [API](#api)
12+
- [In depth](#in-depth)
1413

1514
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
1615

@@ -26,20 +25,20 @@ npm i axios-rest-resource axios
2625

2726
```ts
2827
// utils/resource.ts
29-
import { ResourceBuilder } from "axios-rest-resource";
28+
import { ResourceBuilder } from 'axios-rest-resource'
3029

3130
export const resourceBuilder = new ResourceBuilder({
32-
baseURL: "http://localhost:3000"
33-
});
31+
baseURL: 'http://localhost:3000',
32+
})
3433
```
3534

3635
- Using a newly created resource builder create an actual resource
3736

3837
```ts
3938
// api/entity1.js
40-
import { resourceBuilder } from "utils/resource";
39+
import { resourceBuilder } from 'utils/resource'
4140

42-
export const entity1Resource = resourceBuilder.build({ url: "/entity1" });
41+
export const entity1Resource = resourceBuilder.build({ url: '/entity1' })
4342
// exports an object
4443
// {
4544
// create: (requestConfig) => axiosPromise // sends POST http://localhost:3000/entity1,
@@ -53,72 +52,67 @@ npm i axios-rest-resource axios
5352
- Use your resource whenever you want to make an AJAX call
5453

5554
```ts
56-
import { entity1Resource } from "api/entity1";
55+
import { entity1Resource } from 'api/entity1'
5756

58-
const resRead = entity1Resource.read();
57+
const resRead = entity1Resource.read()
5958
// sends GET http://localhost:3000/entity1
6059
// resRead is a Promise of data received from the server
6160

62-
const resReadOne = entity1Resource.readOne({ params: { id } });
61+
const resReadOne = entity1Resource.readOne({ params: { id } })
6362
// for id = '123'
6463
// sends GET http://localhost:3000/entity1/123
6564
// resReadOne is a Promise of data received from the server
6665

67-
const resCreate = entity1Resource.create({ data });
66+
const resCreate = entity1Resource.create({ data })
6867
// for data = { field1: 'test' }
6968
// sends POST http://localhost:3000/entity1 with body { field1: 'test' }
7069
// resCreate is a Promise of data received from the server
7170

72-
const resUpdate = entity1Resource.update({ data, params: { id } });
71+
const resUpdate = entity1Resource.update({ data, params: { id } })
7372
// for data = { field1: 'test' } and id = '123'
7473
// sends PUT http://localhost:3000/entity1/123 with body { field1: 'test' }
7574
// resUpdate is a Promise of data received from the server
7675

77-
const resRemove = entity1Resource.remove({ params: { id } });
76+
const resRemove = entity1Resource.remove({ params: { id } })
7877
// for id = '123'
7978
// sends DELETE http://localhost:3000/entity1/123
8079
// resRemove is a Promise of data received from the server
8180
```
8281

8382
## URL token substituion
8483

85-
axios-rest-resource applies [interceptorUrlFormatter](docs/api/README.md#interceptorurlformatter) interceptor by default. It handles {token} substituin in URLs.
84+
axios-rest-resource applies [interceptorUrlFormatter](src/url-formatter.ts) interceptor by default. It handles {token} substitution in URLs.
8685

8786
## Custom resource schema
8887

8988
- Create resource module in your utils folder
9089

9190
```ts
9291
// utils/resource.ts
93-
import { ResourceBuilder } from "axios-rest-resource";
92+
import { ResourceBuilder } from 'axios-rest-resource'
9493

9594
export const resourceBuilder = new ResourceBuilder({
96-
baseURL: "http://localhost:3000"
97-
});
95+
baseURL: 'http://localhost:3000',
96+
})
9897
```
9998

10099
- Using a newly created resource builder create an actual resource
101100

102101
```ts
103102
// api/entity2.js
104-
import {
105-
IResourceSchemaKeysDefault,
106-
resourceSchemaDefault
107-
} from "axios-rest-resource";
108-
import { resourceBuilder } from "utils/resource";
109-
110-
export const entity2Resource = resourceBuilder.build<
111-
IResourceSchemaKeysDefault | "doSomething"
112-
>({
103+
import { resourceSchemaDefault } from 'axios-rest-resource'
104+
import { resourceBuilder } from 'utils/resource'
105+
106+
export const entity2Resource = resourceBuilder.build({
113107
schema: {
114108
...resourceSchemaDefault,
115109
doSomething: {
116-
method: "post",
117-
url: "/do-something"
118-
}
110+
method: 'post',
111+
url: '/do-something',
112+
},
119113
},
120-
url: "/entity2"
121-
});
114+
url: '/entity2',
115+
})
122116
// exports an object
123117
// {
124118
// create: (requestConfig) => axiosPromise // sends POST http://localhost:3000/entity2,
@@ -133,33 +127,33 @@ axios-rest-resource applies [interceptorUrlFormatter](docs/api/README.md#interce
133127
- Use your resource whenever you want to make an AJAX call
134128

135129
```ts
136-
import { entity2Resource } from "api/entity2";
130+
import { entity2Resource } from 'api/entity2'
137131

138-
const resRead = entity2Resource.read();
132+
const resRead = entity2Resource.read()
139133
// sends GET http://localhost:3000/entity2
140134
// resRead is a Promise of data received from the server
141135

142-
const resReadOne = entity2Resource.readOne({ params: { id } });
136+
const resReadOne = entity2Resource.readOne({ params: { id } })
143137
// for id = '123'
144138
// sends GET http://localhost:3000/entity2/123
145139
// resReadOne is a Promise of data received from the server
146140

147-
const resCreate = entity2Resource.create({ data });
141+
const resCreate = entity2Resource.create({ data })
148142
// for data = { field1: 'test' }
149143
// sends POST http://localhost:3000/entity2 with body { field1: 'test' }
150144
// resCreate is a Promise of data received from the server
151145

152-
const resUpdate = entity2Resource.update({ data, params: { id } });
146+
const resUpdate = entity2Resource.update({ data, params: { id } })
153147
// for data = { field1: 'test' } and id = '123'
154148
// sends PUT http://localhost:3000/entity2/123 with body { field1: 'test' }
155149
// resUpdate is a Promise of data received from the server
156150

157-
const resRemove = entity2Resource.remove({ params: { id } });
151+
const resRemove = entity2Resource.remove({ params: { id } })
158152
// for id = '123'
159153
// sends DELETE http://localhost:3000/entity2/123
160154
// resRemove is a Promise of data received from the server
161155

162-
const resDoSomething = entity2Resource.doSomething();
156+
const resDoSomething = entity2Resource.doSomething()
163157
// sends POST http://localhost:3000/entity2/do-something
164158
// resDoSomething is a Promise of data received from the server
165159
```
@@ -168,17 +162,17 @@ You custom schema does not need to extend default schema if you do not want that
168162

169163
```ts
170164
// api/entity.js
171-
import { resourceBuilder } from "utils/resource";
165+
import { resourceBuilder } from 'utils/resource'
172166

173-
export const entityResource = resourceBuilder.build<"doSomething">({
167+
export const entityResource = resourceBuilder.build({
174168
schema: {
175169
doSomething: {
176-
method: "post",
177-
url: "/do-something"
178-
}
170+
method: 'post',
171+
url: '/do-something',
172+
},
179173
},
180-
url: "/entity"
181-
});
174+
url: '/entity',
175+
})
182176
// exports an object
183177
// {
184178
// doSomething: (requestConfig) => axiosPromise // sends POST http://localhost:3000/entity/do-something
@@ -189,75 +183,46 @@ Alternatively you can use a partial of a default schema
189183

190184
```ts
191185
// api/entity.js
192-
import { resourceSchemaDefault } from "axios-rest-resource";
193-
import { resourceBuilder } from "utils/resource";
186+
import { resourceSchemaDefault } from 'axios-rest-resource'
187+
import { resourceBuilder } from 'utils/resource'
194188

195-
const { read, readOne } = resourceSchemaDefault;
189+
const { read, readOne } = resourceSchemaDefault
196190

197-
export const entityResource = resourceBuilder.build<"read" | "readOne">({
191+
export const entityResource = resourceBuilder.build({
198192
schema: {
199193
read,
200-
readOne
194+
readOne,
201195
},
202-
url: "/entity"
203-
});
196+
url: '/entity',
197+
})
204198
// exports an object
205199
// {
206200
// read: (requestConfig) => axiosPromise // sends GET http://localhost:3000/entity,
207201
// readOne: (requestConfig) => axiosPromise // sends GET http://localhost:3000/entity/{id},
208202
// }
209203
```
210204

211-
## Adavanced usage
205+
## In depth
212206

213-
You can pass a custom axios instance factory to ResourceBuilder. It's useful if you want to do something more with your axios instance like add an interceptor.
207+
What does `ResourceBuilder` do exactly upon creation?
214208

215-
```ts
216-
import { ResourceBuilder } from "axios-rest-resource";
217-
import axios, { AxiosInstance } from "axios";
218-
219-
const createAxiosInstanceFromUrl = (resourceUrl: string): AxiosInstance => {
220-
const axiosInstance = axios.create({
221-
// Don't forget to append resourceUrl to baseURL
222-
baseURL: `http://localshot:3000${resourceUrl}`,
223-
// It might be a good idea to tell your server what data you expect in return
224-
headers: {
225-
Accept: "application/json"
226-
}
227-
});
228-
// This time we want to add response interceptors
229-
axiosInstance.interceptors.response.use(myResponeInterceptor);
230-
// Don't forget to add interceptorUrlFormatter if you want to keep {token} replacement in urls
231-
axiosInstance.interceptors.request.use(interceptorUrlFormatter);
232-
return axiosInstance;
233-
};
234-
235-
export const resourceBuilder = new ResourceBuilder(createAxiosInstanceFromUrl);
236-
```
209+
When you call `new ResourceBuilder(axiosConfig)`
237210

238-
As you can see there's a lot you have to remember. Not to keep all those things in mind you can utilize [createAxiosResourceFactory](docs/api/README.md#createaxiosresourcefactory).
211+
1. If your `axiosConfig` doesn't have `headers.Accept` property it sets it to 'application/json'.
212+
1. It creates a new instance of axios passing `axiosConfig` to `axios.create`.
213+
1. It adds `interceptorUrlFormatter` to request interceptors of the newly created instance of axios.
214+
1. It exposes the newly created instance of axios for further modifications at `axiosInstance`.
215+
216+
Each instance of ResourceBuilder has its own `axiosInstance`. It's useful if you want to do something more with your axios instance like adding an interceptor.
239217

240218
```ts
241-
import {
242-
ResourceBuilder,
243-
createAxiosResourceFactory
244-
} from "axios-rest-resource";
245-
import { AxiosInstance } from "axios";
246-
247-
const createAxiosResource = createAxiosResourceFactory({
248-
baseURL: "http://localshot:3000"
249-
});
250-
const createAxiosInstanceFromUrl = (resourceUrl: string): AxiosInstance => {
251-
// Creates an axios instance with appended resourceUrl and applied interceptorUrlFormatter. You can pass an additional array of request interceptors just like with ResourceBuilder. In fact ResourceBuilder uses this very function uner the hood.
252-
const axiosInstance = createAxiosResource(resourceUrl);
253-
// Add that response interceptor
254-
axiosInstance.interceptors.response.use(myResponeInterceptor);
255-
return axiosInstance;
256-
};
257-
258-
export const resourceBuilder = new ResourceBuilder(createAxiosInstanceFromUrl);
259-
```
219+
import { ResourceBuilder } from 'axios-rest-resource'
220+
import axios, { AxiosInstance } from 'axios'
260221

261-
## API
222+
const resourceBuilder = new ResourceBuilder({
223+
baseURL: 'http://localhost:3000',
224+
})
225+
resourceBuilder.axiosInstance.interceptors.response.use(myCustomResponeInterceptor)
262226

263-
[API reference](docs/api/README.md)
227+
export resourceBuilder
228+
```

0 commit comments

Comments
 (0)