Queryfi

Project Details

Queryfi is a project I built to tackle a common problem in modern web development: making frontend data fetching flexible, safe, and maintainable while keeping the backend simple.

Motivation

In many projects, building API endpoints that cover every possible data-fetching scenario becomes a nightmare. Frontend developers often have to request multiple endpoints or write redundant logic to get related data.

I wanted a solution where the frontend can dynamically ask for exactly the data it needs, and the backend can handle it safely and efficiently, without hardcoding every possible query.

What It Does

Queryfi allows frontend apps to build complex queries dynamically, including:

Relationships: Fetch related models with .with() calls.
Filtering: Use .where() to specify conditions.
Ordering & Pagination: Chain .orderBy() or .paginate() to get results exactly as needed.
Type Safety: Fully typed queries in TypeScript for confidence at compile time.

On the backend (Laravel), a simple trait handles incoming queries, mapping them to Eloquent models securely. No repetitive controller code, no redundant endpoints.

How It Works

The frontend constructs queries like:

const query = createQuery<User>("/api/users", {
  baseUrl: "http://localhost:8000/",
})
  .with(["posts"])
  .where([
    ["name", "like", "%Marisa%"],
    ["id", ">", 10],
  ])
  .build();

This generates a fully-formed API request URL, fetching only the requested data. The backend automatically interprets it and returns JSON like:

{
  "id": 50,
  "name": "Marques Kautzer",
  "posts": [{ "id": 99, "content": "...", "status": "inactive" }]
}

Why I Built It

Reduce backend boilerplate and repeated endpoints.
Give frontend developers the power to fetch exactly what they need.
Improve maintainability, type safety, and developer experience.

Technologies Used

Frontend: TypeScript, Axios (or Fetch API)
Backend: Laravel, Eloquent
Concepts: Dynamic query building, typed API queries, relationship fetching