Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 0 additions & 64 deletions docs/components/content/app/AgoliaDocSearch.client.vue

This file was deleted.

4 changes: 0 additions & 4 deletions docs/content/1.guide/1.getting-started/2.usage.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
---
description: ''
---

# Usage

## Standard
Expand Down
40 changes: 40 additions & 0 deletions docs/content/3.plugins/1.introduction.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
# Introduction

Pinia ORM can also be extended by a plugin system which you can use to extend the
`Repository` or the global `config`

## Writing a custom plugin

Use `definePiniaOrmPlugin` to create a custom Pinia ORM plugin. The context option gives you
`model`, `repository` and `config` which you can edit

````ts{piniaOrmPlugin.ts}
export default definePiniaOrmPlugin((context) => {
context.config.apiConfig = 'test'
return context
})
````

Now add your custom plugin to the Pinia ORM instance:

````ts
import { createPinia, setActivePinia } from 'pinia'
import { createORM } from 'pinia-orm'
import { createApp } from 'vue'
import { piniaOrmPlugin } from './plugins'

const app = createApp({})
const pinia = createPinia()
const piniaOrm = createORM()
piniaOrm().use(piniaOrmPlugin)
pinia.use(piniaOrm)
app.use(pinia)
setActivePinia(pinia)
````

Now everytime e.g. you use `useRepo` which uses the global config you can do this

````ts
console.log(useRepo(User).config.apiConfig)
// 'test'
````
54 changes: 54 additions & 0 deletions docs/content/3.plugins/2.axios/1.guide/1.setup.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
# Setup Axios

This plugin gives you useful functions which is extending the `Repository`

## Install Pinia ORM Axios Plugin

::code-group
```bash [Yarn]
yarn add @pinia-orm/axios
```
```bash [NPM]
npm install @pinia-orm/axios --save
```
```bash [PNPM]
pnpm add @pinia-orm/axios
```
::

## Adding the plugin to your pinia ORM store

You have to options here to use the plugin. Either you use `createPiniaOrmPluginAxios(options?: PinaOrmPluginOptions)`
or you use `pinaOrmPluginAxios`. It depends if you want to pass options on initialization or later.

::code-group
```js{}[Vue3]
import { createPinia } from 'pinia'
import { createORM } from 'pinia-orm'
import { createPiniaOrmPluginAxios } from '@pinia-orm/axios'
import axios form 'axios'

const pinia = createPinia()
const piniaOrm = createORM()
piniaOrm().use(createPiniaOrmPluginAxios({
axios
}))
pinia.use(piniaOrm)
```
```js{}[Vue2]
import { createPinia, PiniaVuePlugin } from 'pinia'
import { createORM } from 'pinia-orm'
import { createPiniaOrmPluginAxios } from '@pinia-orm/axios'
import axios form 'axios'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()
const piniaOrm = createORM()
piniaOrm().use(createPiniaOrmPluginAxios({
axios
}))
pinia.use(piniaOrm)
```
::


181 changes: 181 additions & 0 deletions docs/content/3.plugins/2.axios/1.guide/2.configuration.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
# Configurations

Pinia ORM Axios plugin comes with various options to control request behavior. These options can be configured in three common places:

- **Globally** - options can defined during installation
- **Model** - options can be defined on a per-model basis
- **Request** - options can be defined on a per-request basis

Any axios options are permitted alongside any plugin options. Options are inherited in the same order, i.e. Global configuration is merged and preceded by Model configuration which is then merged and preceded by any Request configuration.

### Global Configuration

Options can be defined during plugin installation by passing an object as the second argument of the Pinia ORM `use()` method. At minimum, the axios instance is required while any other option is entirely optional.

The following example configures the plugin with an axios instance (required), the `baseURL` option, and some common `headers` that all requests will inherit:

```js
import axios from 'axios'
import { createORM } from 'pinia-orm'
import { createPiniaOrmPluginAxios } from '@pinia-orm/axios'

const piniaOrm = createORM()
piniaOrm().use(createPiniaOrmPluginAxios({
axios,
headers: { 'X-Requested-With': 'XMLHttpRequest' },
baseURL: 'https://example.com/api/'
}))
```

### Model Configuration

Options can be defined on models by setting the static `config.axiosApi` property. This is an object where you may configure model-level request configuration.

The following example configures a model with common `headers` and `baseURL` options:

```js
import { Model } from 'pinia-orm'

class User extends Model {
static entity = 'users'

static fields () {
return {
id: this.attr(null),
name: this.attr('')
}
}

static config = {
axiosApi: {
headers: { 'X-Requested-With': 'XMLHttpRequest' },
baseURL: 'https://example.com/api/'
}
}
}
```

### Request Configuration

Options can be defined on a per-request basis. These options will inherit any global and model configurations which are subsequently passed on to the request.

The following example configures a request with common `headers` and `baseURL` options:

```js
useAxiosRepo(User).api().get('/api/users', {
headers: { 'X-Requested-With': 'XMLHttpRequest' },
baseURL: 'https://example.com/api/'
})
```

Request configurations vary depending on the type of request being made. Please refer to the [Usage Guide](usage) to read more.


## Available Options

In addition to [axios request options](https://github.com/axios/axios#request-config), the plugin can be configured with the following options:

### `dataKey`

- **Type**: `string`
- **Default**: `undefined`

This option will inform the plugin of the resource key your elements may be nested under in the response body.

For example, your response body may be nested under a resource key called `data`:

```js
{
ok: true,
data: {
id: 1,
name: 'John Doe'
}
}
```

The following example sets the `dataKey` to `data` as this is the resource key which contains the required data for the model schema.

```js
useAxiosRepo(User).api().get('/api/users', {
dataKey: 'data'
})
```

The plugin will pass all the data within the data object to Pinia ORM which can then be successfully persisted to the store.

::alert{type=warning}
This option is ignored when using the `dataTransformer` option.
::

### `dataTransformer`

- **Type**: `(response: AxiosResponse) => Array | Object`
- **Default**: `undefined`

This option will let you intercept and transform the response before persisting it to the store.

The method will receive a [Response](usage.md#handling-responses) object allowing you to access response properties such as response headers, as well as manipulate the data as you see fit.

Any method defined must return data to pass on to Pinia ORM.

You can also use object destructuring to get specific properties from the response object.

```js
useAxiosRepo(User).api().get('/api/users', {
dataTransformer: ({ data, headers }) => {
// Do stuff with headers...
// Do stuff with data...

return data
}
})
```

::: warning
Using the `dataTransformer` option will ignore any `dataKey` option.
:::

**See also**: [Transforming Data](usage.md#transforming-data)

### `persistBy`

- **Type**: `string`
- **Default**: `'save'`

This option determines which Pinia ORM persist method should be called when Pinia ORM Axios attempts to save the response data to the store.

You can set this option to any one of the following string values:

- `insert`

### `save`

- **Type**: `boolean`
- **Default**: `true`

This option will determine whether Pinia ORM should persist the response data to the store or not.

By setting this option to `false`, the response data will not be persisted and you will have to handle persistence alternatively. The `entities` property in the [Response](usage.md#handling-responses) object will also be `null` since it will no longer be persisting data automatically.

**See also**: [Deferring Persistence](usage.md#deferring-persistence)

### `delete`

- **Type**: `string | number | (model: Model) => boolean`
- **Default**: `undefined`

This option is primarily used with delete requests. It's argument signature is identical to the [Pinia ORM delete](https://vuex-orm.org/guide/data/deleting) method by which a primary key can be set as the value, or passing a predicate function. The corresponding record will be removed from the store after the request is made.

Setting this option will ignore any `save` options you may have set and therefore persistence is not possible when using this option.

**See also**: [Delete Requests](usage.md#delete-requests)

### `actions`

- **Type**: `Object`
- **Default**: `{}`

This option allows for your own predefined api methods.

Please refer to the [Custom Actions](custom-actions) documentation to learn more.
Loading