Data Fetching

To set up fetching, you need three things: a base URL, a token, and the fetch function. Mono ships with all of them.

Inside your mono.config.ts, define a fetching object. api is a named map — each entry has a required url, a type ('restful' or 'odata'), and, for odata, its own oDataService. The shared DevExtreme source constructors (dataSource / oDataStore / customStore) are the same for every odata API, so they live once on fetching.source:

import { defineConfig } from 'mono-utils/config'
import DataSource from 'devextreme/data/data_source'
import ODataStore from 'devextreme/data/odata/store'
import CustomStore from 'devextreme/data/custom_store'
import { DefaultService } from './odata/DefaultService'

export default defineConfig({
    name: 'mono-vue',
    fetching: {
        api: {
            Posts: {
                type: 'restful',
                url: 'https://jsonplaceholder.typicode.com',
            },
            MyApi: {
                type: 'odata',
                url: 'https://dev-ppl-project.phoenix-squad.eu.org/odata',
                // unique per odata API:
                oDataService: DefaultService,
            },
        },
        // shared by every odata API:
        source: {
            dataSource: DataSource,
            oDataStore: ODataStore,
            customStore: CustomStore,
        },
    }
});

You then pick which named API a call uses with configBaseUrl: "<entryName>". It resolves that entry's url (and, for odata, the shared source ctors plus that entry's oDataService), overriding the call's own baseUrl.

Normal Fetching

Call monoFetch as your fetch function. Point it at a named entry with configBaseUrl, or pass a baseUrl directly.

<script setup lang="ts">
import {monoFetch} from 'mono-utils/fetching'

let fetchPostData = async () => {
  // resolves the base URL from the "Posts" entry in mono.config.ts
  const response = await monoFetch('/posts', {
    configBaseUrl: 'Posts',
    // or pass the base URL directly instead:
    // baseUrl: 'https://jsonplaceholder.typicode.com',
    method: 'GET'
  })
  // the response is available here
  console.log({response})
}
</script>
<template>
  <div>
    <button @click="fetchPostData()">
     Test Fetching
    </button>
  </div>
</template>

OData Fetching

monoFetchOdata works like monoFetch, but it targets an odata entry. Pointing at it with configBaseUrl resolves both the base URL and the source constructors from that entry. The difference from monoFetch is that you can shape the OData result through the options field. See the example below.

<script setup lang="ts">
import {monoFetch} from 'mono-utils/fetching'

let fetchBrandData = async () => {
  // resolves the base URL + source constructors from the "MyApi" odata entry
  const response = await monoFetchOdata({
    configBaseUrl: 'MyApi',
    url: '/DTO_Brand',
    method: 'GET',
    type: 'data',
    options: {
      key: 'Id',
      select: ['Id', 'Nama'],
      sort: [
        {
          selector: 'Id',
          desc: true,
        }
      ]
    }
  })
  // the response is available here
  console.log({response})
}
</script>
<template>
  <div>
    <button @click="fetchBrandData()">
     Test Fetching
    </button>
  </div>
</template>

Adding a JWT Token

Since both monoFetch and monoFetchOdata share the same config, you can define the token once and use it globally. Set up your mono.config.ts like this:

import { defineConfig } from 'mono-utils/config'

export default defineConfig({
  name: 'mono-host',
  fetching: {
      api: {
          Posts: {
              type: 'restful',
              url: 'https://jsonplaceholder.typicode.com',
          },
          MyApi: {
              type: 'odata',
              url: 'https://dev-ppl-project.phoenix-squad.eu.org/odata',
          },
      },
      auth: {
          token: 'Your_Token',
          tokenRefresh: 'Your_Refresh_Token',
          // you can choose between token or tokenRefresh below as your token request
          use: 'tokenRefresh',
      },
  },
  cookie: [
    {
      name: 'Your_Token',
    },
    {
      name: 'Your_Refresh_Token',
    }
  ],
});

The idea is simple: you already have cookies defined in your config, and auth picks which cookie is the token and which is the refresh token. The use field then decides which one is sent on every fetch request.