fetch.macro

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

Usage

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.

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());