A concise and efficient abstraction layer built on top of the Fetch API.
npm i query-proxyimport Query from "query-proxy";
const query = new Query("https://jsonplaceholder.typicode.com");async function handleRequest() {
const { response, loading, duration } = await query.get("/todos", {
...options,
});
}query.get(); // GET REQUEST
query.post(); // POST REQUEST
query.put(); // PUT REQUEST
query.delete(); // DELETE REQUEST
query.request(); // OTHER REQUESTS2. If you are working with typescript you can pass a generic to the query methods to type the response.json() directly
interface Todo {
completed: boolean;
id: number;
title: string;
userId: number;
}
async function handleRequest() {
const { response, loading, duration } = await query.get<Todo[]>("/todos", {
...options,
});
const data = await response.json();
//data would inherit the type Todo[]
}3. the query methods accept all the request props that a normal fetch would with the inclusion of method only for the query.request() method
import Query from "query-js";
interface RequestParams {
headers?: HeadersInit;
body?: BodyInit | null;
mode?: RequestMode;
credentials?: RequestCredentials;
cache?: RequestCache;
redirect?: RequestRedirect;
referrer?: string;
referrerPolicy?: ReferrerPolicy;
integrity?: string;
keepalive?: boolean;
signal?: AbortSignal | null;
window?: any;
}
const options: RequestParams = {};
interface Todo {
completed: boolean;
id: number;
title: string;
userId: number;
}
const query = new Query("https://jsonplaceholder.typicode.com");
async function handleRequest() {
const { response, loading, duration } = await query.get<Todo[]>("/todos", {
...options,
});
const data = await response.json();
}