<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Coxlee Anthony Hubilla</title>
    <description>The latest articles on Forem by Coxlee Anthony Hubilla (@coxxanthony).</description>
    <link>https://forem.com/coxxanthony</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F338168%2F36cafd32-112a-42d5-adac-05d75c6ade00.jpeg</url>
      <title>Forem: Coxlee Anthony Hubilla</title>
      <link>https://forem.com/coxxanthony</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/coxxanthony"/>
    <language>en</language>
    <item>
      <title>🔶 Introducing RestShape — GraphQL-Style Data Shaping for REST APIs</title>
      <dc:creator>Coxlee Anthony Hubilla</dc:creator>
      <pubDate>Sat, 11 Oct 2025 07:57:38 +0000</pubDate>
      <link>https://forem.com/coxxanthony/introducing-restshape-graphql-style-data-shaping-for-rest-apis-3hgf</link>
      <guid>https://forem.com/coxxanthony/introducing-restshape-graphql-style-data-shaping-for-rest-apis-3hgf</guid>
      <description>&lt;p&gt;TL;DR:&lt;br&gt;
RestShape lets you query, reshape, and transform REST API responses declaratively — no GraphQL server, no heavy setup.&lt;br&gt;
You just feed your data and a query string, and it returns exactly the structure you want.&lt;/p&gt;



&lt;p&gt;💭 The Problem&lt;/p&gt;

&lt;p&gt;Modern APIs often deliver data that’s too verbose or inconsistent for what the frontend actually needs.&lt;/p&gt;

&lt;p&gt;So we write countless lines of glue code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const result = {
  name: res.user.firstName + ' ' + res.user.lastName,
  manager: res.department?.manager?.name,
};
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Multiply that by dozens of endpoints — and you get cluttered transformation logic scattered across your app.&lt;/p&gt;

&lt;p&gt;I wanted something as expressive as GraphQL, but as simple as JavaScript.&lt;br&gt;
That’s why I built RestShape.&lt;/p&gt;



&lt;p&gt;⚡ What Is RestShape?&lt;/p&gt;

&lt;p&gt;RestShape is a lightweight JavaScript utility that lets you:&lt;/p&gt;

&lt;p&gt;✅ Pick, transform, and reshape API responses declaratively&lt;br&gt;
✅ Compute fields inline (e.g., fullName: firstName + " " + lastName)&lt;br&gt;
✅ Filter, limit, and skip array results&lt;br&gt;
✅ Conditionally include or skip fields with &lt;a class="mentioned-user" href="https://dev.to/include"&gt;@include&lt;/a&gt; and &lt;a class="mentioned-user" href="https://dev.to/skip"&gt;@skip&lt;/a&gt;&lt;br&gt;
✅ Apply transformations using @transform(fn: "...")&lt;br&gt;
✅ Merge multiple data sources into one unified object&lt;br&gt;
✅ Use fragments for reusable field definitions&lt;/p&gt;

&lt;p&gt;All in plain JS — no GraphQL server needed.&lt;/p&gt;



&lt;p&gt;📦 Installation&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install rest-shape
# or
yarn add rest-shape
# or
pnpm add rest-shape
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// ES Modules
import { shape } from "rest-shape";
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// CommonJS
const { shape } = require("rest-shape");
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;🧱 Basic Example&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const data = {
  user: { firstName: "John", lastName: "Doe" },
  department: {
    name: "Engineering",
    manager: { name: "Alex Johnson", email: "alex.johnson@example.com" },
  },
};

const query = `
departmentName: department.name
manager {
  name
  email: department.manager.email
}
fullName: user.firstName + " " + user.lastName
`;
const result = shape(data, query);

console.log(result);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Output:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "departmentName": "Engineering",
  "manager": {
    "name": "Alex Johnson",
    "email": "alex.johnson@example.com"
  },
  "fullName": "John Doe"
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;🧠 Why This Matters&lt;/p&gt;

&lt;p&gt;Sometimes you don’t need GraphQL — you just need GraphQL-like data shaping.&lt;/p&gt;

&lt;p&gt;RestShape gives you:&lt;/p&gt;

&lt;p&gt;Fine-grained control of REST responses&lt;/p&gt;

&lt;p&gt;Reusable “query strings” for consistent transformations&lt;/p&gt;

&lt;p&gt;Fewer data-mapping utilities in your frontend and backend&lt;/p&gt;

&lt;p&gt;Cleaner API adapters and response logic&lt;/p&gt;

&lt;p&gt;It’s perfect for BFFs, frontend normalization, or ETL transformations.&lt;/p&gt;




&lt;p&gt;🔍 Advanced Features&lt;/p&gt;

&lt;p&gt;🧩 Combine Multiple Sources&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const github = { user: { login: "octocat", followers: 1000 } };
const linkedin = { user: { connections: 500 } };

const data = {
  user: { ...github.user, ...linkedin.user },
};

const query = `
user {
  username: login
  totalFollowers: followers + connections
}
`;

shape(data, query);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Output:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{ "user": { "username": "octocat", "totalFollowers": 1500 } }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;🎛 Conditional Directives&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const data = { user: { isActive: false, name: "John" } };

const query = `
user {
  name
  email @include(if: "user.isActive")
}
`;

shape(data, query);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Output:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{ "user": { "name": "John", "email": null } }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;🔁 Array Filters and Limits&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const data = {
  posts: [
    { title: "Post 1", status: "published" },
    { title: "Post 2", status: "draft" },
    { title: "Post 3", status: "published" },
  ],
};

const query = `
posts(filter: "status === 'published'", limit: 1) {
  title
}
`;

shape(data, query);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Output:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{ "posts": [{ "title": "Post 1" }] }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;🧩 Fragments and Reusability&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const data = {
  user: {
    department: {
      manager: { name: "Alex", email: "alex@example.com" },
    },
  },
};

const fragments = {
  managerFields: { name: "name", email: "email" },
};

const query = `
user {
  department {
    manager {
      ...managerFields
    }
  }
}
`;

shape(data, query, fragments);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;🧭 Why I Built It&lt;/p&gt;

&lt;p&gt;I’ve always liked how GraphQL lets you shape responses cleanly, but I often didn’t need the server-side complexity.&lt;/p&gt;

&lt;p&gt;So I asked:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“What if we could get the same expressive power directly in JavaScript?”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That’s the goal of RestShape — to bridge the gap between REST simplicity and GraphQL flexibility.&lt;/p&gt;




&lt;p&gt;🚀 Get Started&lt;/p&gt;

&lt;p&gt;📦 NPM: &lt;a href="https://www.npmjs.com/package/rest-shape" rel="noopener noreferrer"&gt;https://www.npmjs.com/package/rest-shape&lt;/a&gt;&lt;br&gt;
💻 GitHub: &lt;a href="https://github.com/coxxanthony/rest-shape" rel="noopener noreferrer"&gt;https://github.com/coxxanthony/rest-shape&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If this idea resonates — try it, star it, or share feedback!&lt;br&gt;
I’m improving it continuously and would love to hear how you’d use it.&lt;/p&gt;




&lt;p&gt;✨ Final Thoughts&lt;/p&gt;

&lt;p&gt;RestShape isn’t meant to replace GraphQL.&lt;br&gt;
It’s for developers who want GraphQL-like control over their REST data — lightweight, composable, and JavaScript-native.&lt;/p&gt;

&lt;p&gt;Shape your data, not your stack.&lt;br&gt;
RestShape — because REST deserves structure too.&lt;/p&gt;

</description>
      <category>restapi</category>
      <category>webdev</category>
      <category>graphql</category>
      <category>opensource</category>
    </item>
  </channel>
</rss>
