Allows you to build fetcher function
by URL at compile-time.
f("/api/ping")
↓ ↓ ↓ ↓ ↓ ↓
(opts) => fetch("/api/ping", opts)
Usage • API • Contributors
[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 forbabel-plugin-macros
.
🚧 [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"]],
},
};
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(),
],
};
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.
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);
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); |
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()); |
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()); |
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()); |
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()); |
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()); |
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()); |
[Back to the Table of Contents] ↑
RiN 🤔 🚇 🔧 💻 |
Ryan Aunur Rassyid 💡 |
Rivaldi Putra 💡 |
Ibrahim Hanif 💻 💡 |
Mudassir 💻 💡 |
Ahmad Muwaffaq 💻 💡 |
Abdullah Ammar 💻 💡 |
Afrian Junior 💻 💡 |