Add fetch method

Author: kiaking

docs/.vuepress/config.js

@@ -7,6 +7,7 @@ const sidebars = {
         '/guide/installation',
         '/guide/getting-started',
         '/guide/basic-usage',
+        '/guide/advanced-usage',
         '/guide/configurations',
         '/guide/sponsors'
       ]
@@ -18,7 +19,8 @@ const sidebars = {
       title: 'API',
       collapsable: false,
       children: [
-        '/api/model'
+        '/api/model',
+        '/api/request'
       ]
     }
   ]

docs/api/request.md

@@ -0,0 +1,83 @@
+---
+sidebarDepth: 2
+---
+
+# Request
+
+The Request object is the foundation for the Vuex ORM Axios, and you can call many methods to perform api request. You can obtain Request instance by `api` method on the Model.
+
+```js
+const request = User.api()
+```
+
+Usually, you could just call Request methods directly by method chaining.
+
+```js
+User.api().get()
+```
+
+## Constructor
+
+- **``constructor(model: typeof Model)``**
+
+  Request instance requires the Model class to be passed to the constructor. It's automatically done when obtaining the Request object through `Model.api()` method. But you could manually construct Request object your self.
+
+  ```js
+  // This is equivalent to...
+  const request = new Request(User)
+
+  // This.
+  const request = User.api()
+  ```
+
+## Instance Properties
+
+### model
+
+- **`model: typeof Model`**
+
+  The Model class that is attached to the Request instance.
+
+### axios
+
+- **`axios: AxiosInstance`**
+
+  The Axios instance that will be used to perform the request.
+
+## Instance Methods
+
+### get
+
+- **`get(url: string, config: Config = {}): Promise<Response>`**
+
+  Performs a `GET` request. It takes the same argument as Axios's `get` method.
+
+### post
+
+- **`post(url: string, data: any = {}, config: Config = {}): Promise<Response>`**
+
+  Performs a `POST` request. It takes the same argument as Axios's `post` method.
+
+### put
+
+- **`put(url: string, data: any = {}, config: Config = {}): Promise<Response>`**
+
+  Performs a `PUT` request. It takes the same argument as Axios's `put` method.
+
+### patch
+
+- **`patch(url: string, data: any = {}, config: Config = {}): Promise<Response>`**
+
+  Performs a `PATCH` request. It takes the same argument as Axios's `patch` method.
+
+### delete
+
+- **`delete(url: string, config: Config = {}): Promise<Response>`**
+
+  Performs a `DELETE` request. It takes the same argument as Axios's `delete` method.
+
+### fetch
+
+- **`fetch(url: string, params: any, config: Config = {}): Promise<Response>`**
+
+  The `fetch` method works almost as same as `get` method, but it will take URL query parameters as the 2nd argument. Please [refer here](../guide/advanced-usage.html#fetch) for more details.

docs/guide/advanced-usage.md

@@ -0,0 +1,31 @@
+# Advanced Usage
+
+In addition to basic Axios request methods such as `get` and `post`, Vuex ORM Axios defines a more powerful and convenient method that you can use to call API and integrate with Vuex ORM better.
+
+Vuex ORM defines the following methods.
+
+- [fetch](#fetch)
+
+## fetch
+
+The `fetch` method works almost as same as `get` method, but it will take URL query parameters as the 2nd argument.
+
+```js
+User.api().fetch('/api/users', {
+  search: 'John'
+})
+```
+
+The `fetch` method works almost as same as `get` method, but it will take URL query parameters as the 2nd argument.
+
+The above method will call endpoint at `/api/users?search=john`.
+
+You can also pass general config at 3rd argument.
+
+```js
+User.api().fetch(
+  '/api/users',
+  { search: 'John' },
+  { dataKey: 'data' }
+)
+```

package.json

@@ -16,7 +16,7 @@
     "build:main": "node build/build.js",
     "lint": "tslint '{src,test}/**/*.ts' -c tslint.json -p . --fix",
     "test": "jest",
-    "test:watch": "jest --watchAll",
+    "test:watch": "jest --watch",
     "coverage": "jest --collect-coverage",
     "clean": "rm -rf dist && rm -rf lib && rm -rf coverage && rm -rf .nyc_output && rm -rf .tmp",
     "docs": "vuepress dev docs",

src/api/Request.ts

@@ -63,6 +63,13 @@ export default class Request {
     return this.request({ method: 'delete', url, ...config })
   }
 
+  /**
+   * Fetch data from the api.
+   */
+  fetch (url: string, params: any = {}, config: Config = {}): Promise<Response> {
+    return this.get(url, { params, ...config })
+  }
+
   /**
    * Perform an api request.
    */

test/feature/Request_Fetch.spec.ts

@@ -0,0 +1,88 @@
+import axios from 'axios'
+import MockAdapter from 'axios-mock-adapter'
+import { createStore, createState } from 'test/support/Helpers'
+import { Model, Fields } from '@vuex-orm/core'
+
+describe('Feature - Request - Fetch', () => {
+  let mock: MockAdapter
+
+  class User extends Model {
+    static entity = 'users'
+
+    static fields (): Fields {
+      return {
+        id: this.attr(null),
+        name: this.attr('')
+      }
+    }
+  }
+
+  beforeEach(() => { mock = new MockAdapter(axios) })
+  afterEach(() => { mock.reset() })
+
+  it('can perform a get request', async () => {
+    mock.onGet('/api/users').reply(200, [
+      { id: 1, name: 'John Doe' },
+      { id: 2, name: 'Jane Doe' }
+    ])
+
+    const store = createStore([User])
+
+    await User.api().fetch('/api/users')
+
+    const expected = createState({
+      users: {
+        1: { $id: 1, id: 1, name: 'John Doe' },
+        2: { $id: 2, id: 2, name: 'Jane Doe' }
+      }
+    })
+
+    expect(store.state.entities).toEqual(expected)
+  })
+
+  it('can perform a get request with params', async () => {
+    mock.onGet('/api/users', {
+      params: { search: 'John' }
+    }).reply(200, [
+      { id: 1, name: 'John Doe' },
+      { id: 2, name: 'Jane Doe' }
+    ])
+
+    const store = createStore([User])
+
+    await User.api().fetch('/api/users', { search: 'John' })
+
+    const expected = createState({
+      users: {
+        1: { $id: 1, id: 1, name: 'John Doe' },
+        2: { $id: 2, id: 2, name: 'Jane Doe' }
+      }
+    })
+
+    expect(store.state.entities).toEqual(expected)
+  })
+
+  it('can perform a get request with config', async () => {
+    mock.onGet('/api/users', {
+      params: { search: 'John' }
+    }).reply(200, {
+      data: [
+        { id: 1, name: 'John Doe' },
+        { id: 2, name: 'Jane Doe' }
+      ]
+    })
+
+    const store = createStore([User])
+
+    await User.api().fetch('/api/users', { search: 'John' }, { dataKey: 'data' })
+
+    const expected = createState({
+      users: {
+        1: { $id: 1, id: 1, name: 'John Doe' },
+        2: { $id: 2, id: 2, name: 'Jane Doe' }
+      }
+    })
+
+    expect(store.state.entities).toEqual(expected)
+  })
+})