Fluentity: Framework-Agnostic TypeScript Library to Consume APIs Easily and Safely

[Lomanu4]

Bring Active Record-Like API Consumption to the Frontend with Fluentity


As developers, we often face the same dilemma when working with REST APIs:

We want simplicity, type safety, and clean syntax — but most solutions force us to choose between low-level control (like Axios) or heavy abstractions (like TanStack Query).
Some options are really nice but totally glued to a framework, like PiniaORM which works only with... Pinia (Vuejs).

Throughout my career, I’ve worked on many different projects — each with its own way of handling API data fetching.

Yet none of them offered a solution that was easy to use, type-safe, reusable, chainable, and framework-agnostic.

As a fullstack developer, I naturally think in objects. That’s why Laravel’s Eloquent, a classic implementation of Active Record, feels so intuitive to me — and I know I’m not alone.

I truly believe Eloquent is a big part of Laravel’s popularity.

So I had an idea: what if we brought the elegance of Active Record to the frontend, for REST APIs?

That’s how

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

was born.

Note: This project is still young and actively developed. Feedback is welcome!

What is Fluentity?


Fluentity is a lightweight, framework-agnostic TypeScript library that turns your REST endpoints into real models — with chainable methods, auto-casting, caching, and strong typing.

It also provides a lot of flexibility, by exposing request and response interceptors, overriding the request handler,...

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

Whether you’re working in Vue, Nuxt, React, or any other frontend stack, Fluentity gives you an elegant way to query your API without boilerplate.

Working together


BRO TIP: If your backend is already written in Typescript (NestJS), you can share the DTO between backend and frontend. There's even a way to reuse the same validators !

Getting Started

? Installation


npm install @fluentity/core
# or
yarn add @fluentity/core
# or
pnpm install @fluentity/core

Enable Typescript decorators:

{
"compilerOptions": {
"target": "ESNext",
"experimentalDecorators": true,
"useDefineForClassFields": false
}
}
Configuration


The most basic configuration requires to define the baseUrl.
You can refer to the

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

for more informations.


import { Fluentity } from '@fluentity/core';

Fluentity.configure({
baseUrl: '

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

',
});
Creating models


Fluentity is inspired by Active Record and Laravel Eloquent.

? Example: User & Media Models

User.ts


import { Model, HasMany, Relation, Cast, HasOne, RelationBuilder } from '@fluentity/core'

import { Media } from './Media'
import { Thumbnail } from './Thumbnail'

interface UserAttributes {
name: string
phone: number
email: string
created_at?: string
updated_at?: string
thumbnail?: Thumbnail
}

export class User extends Model<UserAttributes> implements UserAttributes {
static resource = 'users'

name!: string
email!: string
phone!: number
created_at?: string
updated_at?: string

@HasMany(() => Media)
medias!: Relation<Media[]>;

@HasOne(() => Media)
picture!: Relation<Media>;

@Cast(() => Thumbnail)
thumbnail!: Thumbnail

static scopes = {
active: (query: RelationBuilder<User>) => query.where({ status: 'active' }),
}
}

Media.ts


import { Model, Relation, BelongsTo } from '@fluentity/core'

import { Thumbnail } from './Thumbnail'

export interface MediaAttributes {
id: string
name: string
size: string
extension: string
mime_type: string
url: string
}

export class Media extends Model<MediaAttributes> {
static resource = 'medias'
}

Thumbnail.ts


import { Model } from '@fluentity/core'

export class Thumbnail extends Model<any> {
static resource = 'thumbnails'
}
Using Models


Now that the models are created, the hardest part is done! ?


const users = await User.all(); // This makes a GET /users and returns an array of User instances.

const user = await User.find(1); // Get /users/1 - return a user instance.

await user.update({name: 'Johana'}); // This send a PUT request to /users/:id

But there is more! Let's try relationships or sub-resources:

Relationships


const medias = await User.id(1).medias.all(); // Get /users/1/medias - return an array of Media object

await media[0].delete(); // DELETE /users/1/medias/1
Conditions:


const users = await User.where({name: 'Johana'}).all() // GET /users?name=johana
Casting:


const user = await User.find(1);
console.log(user.thumbnail); // Thumbnail object
Scopes:


const users = await User.query().active().all() // GET /users?status=active

? Conclusion

With Fluentity, consuming a REST API feels as natural as querying a database.
You define models once — and enjoy a fully typed, reusable, and object-oriented interface to your backend.

No more juggling between fetch(), Axios, and manually transforming responses.

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

gives you a clean API, inspired by the elegance of Eloquent and Active Record, for the frontend world.

Fluentity: Key Advantages :

• Cleaner, declarative code with real models instead of imperative fetch/then chains.
• Strong Typing: Safer development and fewer runtime bugs.
• Framework-Agnostic: Use it anywhere TypeScript runs, including fullstack apps.
• Chainable Query Builder: Express complex queries fluently.
• Auto-Casting to Real Instances: Enables object-oriented logic across your app.
• No Boilerplate: just define your models.
• Customizable & Extensible: add custom scopes
• Developer Experience (DX) Focus: Makes your API layer fun and productive to work with.

? Star

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

on GitHub
? Try it in your next project, and share your feedback!

Cheers,
Cédric

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.