JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 10
  • Score
    100M100P100Q43100F
  • License MIT

Package Exports

  • fetchero
  • fetchero/dist/fetchero.esm.js
  • fetchero/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 (fetchero) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Fetchero

A type-safe, proxy-based HTTP & GraphQL client for modern applications.

fetchero is a lightweight, flexible, and highly intuitive library for making REST and GraphQL requests.
It uses Proxies for a chainable API, interceptors for pre/post-processing, and enhanced error handling for safer, predictable responses.

Whether you're consuming REST APIs or working with GraphQL backends, Fetchero simplifies the process with a declarative, fluent syntax that feels natural and reduces boilerplate.


Table of Contents

  1. Features
  2. Installation
  3. Basic Usage
  4. REST Client
  5. GraphQL Client
  6. Interceptors
  7. Error Handling
  8. Response Shape
  9. Examples
  10. TypeScript Support
  11. API Overview
  12. Why Fetchero?

Features

  • Proxy-based REST client — Build endpoints dynamically using dot-chaining and path arguments. No manual string concatenation.

  • GraphQL client with query builder — Write GraphQL queries fluently, with support for variables and field selection.

  • Base URL & dynamic headers — Override base URLs and headers globally or per-request.

  • Interceptors — Hook into requests and responses for logging, authentication, and transformation.

  • Error handling — Standardized error objects with meaningful messages and GraphQL error normalization.

  • Fully TypeScript ready — Get autocompletion and type safety for your API calls.


Installation

npm install fetchero

or

yarn add fetchero

Basic Usage

Create an instance

import { createFetchero } from 'fetchero';

const api = createFetchero({
  baseUrl: 'https://api.example.com',
  headers: { Authorization: 'Bearer token' },
});

Or individually

If you only need one client type (REST or GraphQL):

import { rest, gql } from 'fetchero';
const restClient = rest({ baseUrl: '...' });
const gqlClient = gql({ baseUrl: '...' });

REST Client

Making requests

// GET /users
const res = await api.rest.users.get();

// GET /users/123
const res = await api.rest.users(123).get();

// GET /users/123?active=true
const res = await api.rest.users(123).get({ query: { active: true } });

// POST /users with body
const res = await api.rest.users.post({ body: { name: 'John' } });

Dynamic path segments

// GET /users/123/posts/456
const res = await api.rest
  .users(123)
  .posts(456)
  .get();

Or you may like short syntax

// GET /users
const res = await api.rest('users').get();

// GET /users/123
const res = await api.rest('users', 123).get();

// POST /users/123/posts/456
const res = await api
  .rest('users', 123, 'posts', 345)
  .post({ body: { name: 'John' } });

Override base URL or headers

// Different base URL
await api.rest.users.base('https://another-api.com').get();

// Add/override headers
await api.rest.users.headers({ Authorization: 'Bearer new-token' }).get();

GraphQL Client

Fetchero provides a fluent query builder for GraphQL.

Queries

// Basic query
const res = await api.gql.query.getUser({ id: 123 }).select('id name email');

This builds and executes:

query {
  getUser(id: 123) {
    id
    name
    email
  }
}

Mutations

const res = await api.gql.mutation
  .createUser({ name: 'John' })
  .select('id name');

Subscriptions

const res = await api.gql.subscription
  .onMessage({ roomId: 1 })
  .select('id content');

Passing Arguments & Variables

Fetchero automatically converts JS objects into typed GraphQL variables.

Plain Arguments (Auto-inferred types)

await api.gql.query.getUser({ id: 1 }).select('id name');

Builds:

query my_query($id_0: Int) {
  getUser(id: $id_0) {
    id
    name
  }
}

Custom Types

Wrap values in { value, type } to define the GraphQL type explicitly:

await api.gql.query
  .getUser({ id: 1, status: { value: 'ACTIVE', type: 'StatusEnum!' } })
  .select('id name status');

Builds:

query my_query($id_0: Int, $status_0: StatusEnum!) {
  getUser(id: $id_0, status: $status_0) {
    id
    name
    status
  }
}

Nested Input Objects

You can pass complex input types like this:

await api.gql.mutation.updateUser({
  id: 1,
  profile: {
    type: 'UserProfileInput',
    value: { age: 30, email: 'john@example.com' },
  },
});

Builds:

mutation my_mutation($id_0: Int, $profile_0: UserProfileInput) {
  updateUser(id: $id_0, profile: $profile_0)
}

Rules for Arguments

  • Plain values → Auto-inferred type (Int, String, Float).

  • { value, type } → Explicit GraphQL type.

  • Nested objects → Use { type: 'MyInputType', value: { ... } }.

  • Invalid values (arrays, functions, etc.) → Throw an error.


Override base URL & headers

await api.gql.query
  .getUser({ id: 123 })
  .base('https://graphql.alt.com')
  .headers({ Authorization: 'Bearer new' })
  .select('id name');

Interceptors

Intercept and modify requests and responses globally.

import { createFetchero } from 'fetchero';

const api = createFetchero({
  baseUrl: 'https://api.example.com',
  interceptors: {
    request: async config => {
      console.log('Outgoing Request:', config);
      return config;
    },
    response: async response => {
      console.log('Incoming Response:', response.data);
      return response.data;
    },
  },
});

Error Handling

All errors are standardized:

const res = await api.rest.users(999).get();

if (res.errors) {
  console.log(res.errors[0].extensions.message); // "Not Found"
}

GraphQL errors are automatically normalized using errorCompose.


Response Shape

Every request returns:

interface FetcherResponse<T> {
  data: T | null;
  errors?: Array<{
    message?: string;
    extensions: { code?: string; message?: string };
  }>;
}

Examples

Chained REST call with query & headers

await api.rest
  .users(42)
  .headers({ 'X-Custom': 'yes' })
  .posts.get({ query: { page: 2 } });

GraphQL query with variables

await api.gql.query
  .searchUsers({ name: { type: 'String!', value: 'John' } })
  .select('id name email');

TypeScript Support

Type definitions are included out of the box for:

  • REST responses

  • GraphQL queries/mutations

  • Errors & interceptors


API Overview

REST

  • api.rest[resource] — Chainable resource paths

  • Methods: .get(), .post(), .put(), .patch(), .delete()

  • Modifiers: .base(url), .headers({ ... })

GraphQL

  • api.gql.query.field(args).select(fields)

  • Operations: query, mutation, subscription

  • Modifiers: .base(url), .headers({ ... })


Why Fetchero?

  • No need to manually build URLs or queries.

  • Fluent, chainable API.

  • Works equally well for REST & GraphQL.

  • Easy integration with TypeScript & interceptors.