Getting Started
Installation

Getting Started

Quick Install

Install @ibnlanre/builder using your preferred package manager:

npm install @ibnlanre/builder

30-Second Example

Here's how to get started in three simple steps:

// 1. Import the function
import { createBuilder } from '@ibnlanre/builder';
 
// 2. Define your keys and values in one place
const api = createBuilder({
  users: {
    list: async () => fetch('/api/users').then(r => r.json()),
    detail: async (id: number) => fetch(`/api/users/${id}`).then(r => r.json())
  }
});
 
// 3. Use it anywhere with full type-safety
// Get the key
api.users.list.$use()  // → ['users', 'list']
 
// Get the value (the actual function)
await api.$use.users.list()  // → calls the API

That's it! You now have:

  • ✅ Type-safe keys
  • ✅ Centralized API definitions
  • ✅ Full autocomplete support

Real-World Use Case

Let's see a practical example with TanStack Query (opens in a new tab):

import { useQuery } from '@tanstack/react-query';
import { createBuilder } from '@ibnlanre/builder';
 
// Define all your API endpoints in one place
const api = createBuilder({
  posts: {
    list: async (filter?: string) => {
      const url = filter ? `/api/posts?filter=${filter}` : '/api/posts';
      return fetch(url).then(r => r.json());
    },
    detail: async (id: number) => fetch(`/api/posts/${id}`).then(r => r.json())
  }
});
 
// In your React component
function PostsList({ filter }: { filter?: string }) {
  const { data } = useQuery({
    // Builder generates the correct key based on parameters
    queryKey: api.posts.list.$use(filter),  // ['posts', 'list', 'active']
 
    // Access the actual API function
    queryFn: () => api.$use.posts.list(filter)
  });
 
  return <div>{/* render posts */}</div>;
}

Benefits:

  • No more manually typing ['posts', 'list', filter] everywhere
  • TypeScript warns you if parameters don't match
  • Rename an endpoint? Change it once, update everywhere
  • Your API structure serves as living documentation

CDN Usage

For quick prototyping or non-bundled projects, you can use the CDN version:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
 
    <script type="importmap">
      {
        "imports": {
          "@ibnlanre/builder": "https://unpkg.com/@ibnlanre/builder"
        }
      }
    </script>
 
    <script type="module">
      import { createBuilder } from '@ibnlanre/builder';
 
      const api = createBuilder({
        hello: {
          world: () => 'Hello, World!'
        }
      });
 
      console.log(api.hello.world.$use());  // ['hello', 'world']
      console.log(api.$use.hello.world());  // 'Hello, World!'
    </script>
  </head>
 
  <body>
    <div id="app"></div>
  </body>
</html>

Next Steps

Now that you have Builder installed:

IntroductionBasic Usage