@yme/api v1.2.0

@yme/api

Define api resources

Install

pnpm add @yme/api

Usage

Define the resources.

import { createApi, createResources } from '@yme/api'

interface UserItem {
  id: number;
  name: string;
}

interface ListParams {
  page?: number;
  pageSize?: number;
}

interface ListResult<T> {
  list: T[];
  page: number;
  pageSize: number;
}

interface AuthInput {
  username: string;
  password: string;
}

interface AuthOutput {
  token: string;
}

const user = createResources(({makeRequest}) => ({
  list: makeRequest<ListParams, ListResult<UserItem>>('/users', {}),
}));

const auth = makeRequest<AuthInput, AuthOutput>('/auth', {});

Create your api client

import {auth, user} from './resources';

const resources = createResources(({makeRequest, http}) => ({
  auth,
  user,
}));

// create your http client
const http = axios.create({
  baseURL: 'https://example.com/api',
});
// interface
// {url, method, headers, params, data, etc...}
// http(options)

// register the http, so you can use it in the createResources
declare module '@yme/api' {
  interface Register {
    http: typeof http;
  }
}

const api = createApi({
  http,
  resources,
  beforeRequest(config) {
    // ensure headers
    config.headers ??= {};
    config.headers['X-Auth-Token'] = 'your token';
    return config;
  },
  afterResponse(response) {
    const { data, status } = response as AxiosResponse;

    // isOk?
    if (data != null) {
      return data;
    }

    const { code = status, message = 'Oops!' } = data;
    throw new Error(message);
  },
  onSuccess(output) {},
  onFinished() {},
  // handle error
  onError(error: any) {
    // up to you
    if (isAxiosError(error)) {
      // error.code
      // request, response, timeout ...
    }
    window.$message?.error(error.message);
  },
});

How to use the api?

import {api} from './your-api';

api
  .auth({username: 'admin', password: 'admin'})
  .then((output) => {
    // output should be AuthOutput
    console.log(output);
  });

api
  .user.list({page: 1})
  .then((output) => {
    // output should be ListResult<UserItem>
    console.log(output);
  });

Related

• @yme/ant - A mix antd and @yme/api. for example: Get available api paths by type ActiveApiPaths, or use hook to get the resource useApiResource('user.list')

License

MIT