Package Exports

fetch-magic
fetch-magic/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (fetch-magic) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

fetch-magic

This is magic🥳

You don't need to fetch with request url.

// normally
const usersResponse = await fetch('https://yourdomain/api/users');
const articlesResponse = await fetch('https://yourdomain/api/articles');

// fetch-magic
const client = fetchMagic({ baseUrl: 'https://yourdomain/api' });
const usersResponse = await client.getUsers();
const articlesResponse = await client.getArticles();

Set up

npm i fetch-magic
# or
yarn add fetch-magic

Usage

fetch-magic generates request url based on property name.

initialize

Please set your api base url.

import fetchMagic from 'fetch-magic';

const client = fetchMagic({ baseUrl: 'https://yourdomain/api' });

HTTP request methods

Please prefix HTTP request method name.

const client = fetchMagic({ baseUrl: 'https://yourdomain/api' });

// GET
client.getUsers()

// POST
client.postUsers()

// PUT
client.putUsers()

// DELETE
client.deleteUsers()

fetch-magic supports get, post, put, and delete .

You will encounter an error without the method names if you use TypeScript.

// TypeScript Error
client.hoge()

no path parameter

Please use camelCase.

const client = fetchMagic({ baseUrl: 'https://yourdomain/api' });

// request https://yourdomain/api/users
client.getUsers()

// request https://yourdomain/api/articles
client.getArticles()

// request https://yourdomain/api/users/articles
client.getUsersArticles()

path parameter

Please separate property name with _ and set first argument with path parameter.

const client = fetchMagic({ baseUrl: 'https://yourdomain/api' });

// request https://yourdomain/api/users/:userId
client.getUsers_userId({ userId: '1234' });

// request https://yourdomain/api/users/:userId/articles
client.getUsers_userId_Articles({ userId: '1234' });

// request https://yourdomain/api/users/:userId/articles/:articleId
client.getUsers_userId_Articles_articleId({ userId: '1234', articleId: '5678' });

// request https://yourdomain/api/users/:userId/:testId
client.getUsers_userId_testId({ userId: '1234', testId: 'test' });

query parameter

Please set first argument with query parameter.

const client = fetchMagic({ baseUrl: 'https://yourdomain/api' });

// request https://yourdomain/api/users?page=1
client.getUsers({ page: 1 });

// request https://yourdomain/api/users?page=1&name=hoge
client.getUsers({ page: 1, name: 'hoge' });

// request https://yourdomain/api/users/:userId?hoge=fuga
client.getUsers_userId({ userId: '1234', hoge: 'fuga' });

fetch options

Please set second argument with fetch options except for method .

const client = fetchMagic({ baseUrl: 'https://yourdomain/api' });

// with fetch options
client.getUsers({ page: 1 }, {
  mode: 'no-cors',
  headers: {
    'Content-Type': 'application/json',
  }
});

Dependencies

fetch-magic builds request url using urlcat.

License

Released under the MIT license.