fetch.macro

Allows you to build fetcher function by URL at compile-time.

f("/api/ping")

↓ ↓ ↓ ↓ ↓ ↓

(opts) => fetch("/api/ping", opts)

Usage • API • Contributors

Usage

[Back to the Table of Contents] ↑

Simply install and configure babel-plugin-macros and then use fetch.macro.

Some project that build with create-react-app doesn't need extra setup for babel-plugin-macros.

SWC

🚧 [Under Development] This is section for using fetch.macro as swc-plugin.

You can also use fetch.macro in a swc-based project (e.g: Next.js) by using the SWC plugins.

Due to how the plugins loaded, you have to pass rootDir option pointing to the root directory of your project (where your node_modules directory lives). Typically it's enough to pass __dirname.

// next.config.js
module.exports = {
  experimental: {
    swcPlugins: [["fetch.macro/swc"]],
  },
};

Vite

To be able to use these macros in your Vite project, you only need install vite-plugin-babel-macros and add some configuration in vite.config.js. And it just work.

$ npm i -D vite-plugin-babel-macros

import MacrosPlugin from "vite-plugin-babel-macros";

export default {
  // ...
  plugins: [
    // ...
    MacrosPlugin(),
  ],
};

Example

Basic

Run one of the following command inside your project directory to install the package:

$ npm i fetch.macro
or
$ yarn add fetch.macro

Given the following Input:

import f from "fetch.macro";
const fetchByUrl = f("/api/v1/ping");

Babel will produce the following Output:

const fetchByUrl = (opts) => fetch("/api/v1/ping", opts);

It also works as a tagged template literal:

import f from "fetch.macro";
const fetchByUrl = f`/api/v1/ping`;

That will produce the same output as the function version.

Nested

Given the following Input:

import f from "fetch.macro";
const fetchProject = f`/api/v1/user/:id/project/:projectId/:others`;

Babel will produce the following Output:

const fetchProject = ({ id, projectId, others, ...opts }) =>
  fetch(`/api/v1/user/${id}/project/${projectId}/${others}`, opts);

API

default

It will be produce a code for fetch function with URL by input and return response that need to be manual handle the response.

Input	Output
import f from "fetch.macro"; const fetchByUrl = f("/api/v1/ping");	const fetchByUrl = (opts) => fetch("/api/v1/ping", opts);

fetchText

It will be produce a code for fetch function with URL by input and return response text.

Input

Output

import { fetchText } from "fetch.macro";
const fetchProject = fetchText`/api/v1/user/:id/project/:projectId/:others`;

const fetchProject = ({ id, projectId, others, ...opts }) =>
  fetch(`/api/v1/user/${id}/project/${projectId}/${others}`, opts).then((r) => r.text());

fetchJson

It will be produce a code for fetch function with URL by input and return response json.

Input

Output

import { fetchJson } from "fetch.macro";
const fetchProject = fetchJson`/api/v1/user/:id/project/:projectId/:others`;

const fetchProject = ({ id, projectId, others, ...opts }) =>
  fetch(`/api/v1/user/${id}/project/${projectId}/${others}`, opts).then((r) => r.json());

fetchBlob

It will be produce a code for fetch function with URL by input and return response blob.

Input

Output

import { fetchBlob } from "fetch.macro";
const fetchProject = fetchBlob`/api/v1/user/:id/project/:projectId/:others`;

const fetchProject = ({ id, projectId, others, ...opts }) =>
  fetch(`/api/v1/user/${id}/project/${projectId}/${others}`, opts).then((r) => r.blob());

fetchFormData

It will be produce a code for fetch function with URL by input and return response formData.

Input

Output

import { fetchFormData } from "fetch.macro";
const fetchProject = fetchFormData`/api/v1/user/:id/project/:projectId/:others`;

const fetchProject = ({ id, projectId, others, ...opts }) =>
  fetch(`/api/v1/user/${id}/project/${projectId}/${others}`, opts).then((r) => r.formData());

fetchArrayBuffer

It will be produce a code for fetch function with URL by input and return response arrayBuffer.

Input

Output

import { fetchArrayBuffer } from "fetch.macro";
const fetchProject = fetchArrayBuffer`/api/v1/user/:id/project/:projectId/:others`;

const fetchProject = ({ id, projectId, others, ...opts }) =>
  fetch(`/api/v1/user/${id}/project/${projectId}/${others}`, opts).then((r) => r.arrayBuffer());

fetchClone

It will be produce a code for fetch function with URL by input and return response cloned data.

Input

Output

import { fetchClone } from "fetch.macro";
const fetchProject = fetchClone`/api/v1/user/:id/project/:projectId/:others`;

const fetchProject = ({ id, projectId, others, ...opts }) =>
  fetch(`/api/v1/user/${id}/project/${projectId}/${others}`, opts).then((r) => r.clone());

Contributors

[Back to the Table of Contents] ↑

_RiN 🤔 🚇 🔧 💻	_{Ryan Aunur Rassyid} 💡	_{Rivaldi Putra} 💡	_{Ibrahim Hanif} 💻 💡	_Mudassir 💻 💡	_{Ahmad Muwaffaq} 💻 💡	_{Abdullah Ammar} 💻 💡
_{Afrian Junior} 💻 💡