Building SDKs with Hyper Fetch

Hyper Fetch is not just a data-fetching library; it's a powerful framework for creating robust, type-safe, and highly customizable Software Development Kits (SDKs). Whether you're building a client for your own API or for a third-party service, Hyper Fetch provides the tools you need to create a great developer experience.

---

The Power of a Well-Defined SDK

An SDK abstracts away the complexities of interacting with an API. Instead of making raw HTTP calls, developers can use a set of pre-defined, type-safe methods that are easy to discover and use. This reduces boilerplate, prevents common errors, and speeds up development time.

Key Features for SDK Development

Unmatched Type Safety

Hyper Fetch's createRequest builder is the cornerstone of its type safety. By defining types for responses, payloads, and even query parameters, you can catch errors at compile time, not runtime.

// api/requests/users.ts
import { client } from "../client";

export const getUser = client.createRequest<{ response: { id: string; name: string } }>()({
  endpoint: "/users/:userId",
  method: "GET",
});

Now, anyone using getUser will get full type support for the response data.

Seamless Testability

Because requests are just classes, they can be easily mocked in your tests. You don't need complex mocking libraries or to spin up a server. You can use our official testing library to make it even easier.

Check out our Testing Guide.

Endless Customization

The Client instance is the heart of your SDK. It's a builder that you can use to configure every aspect of your SDK's behavior.

• Adapters: Swap out the default fetch adapter for axios, graphql, or even your own custom adapter.
• Cache: Configure global caching strategies and allow them to be overridden on a per-request basis.
• Queueing: Add offline support and request queueing for unreliable network conditions.

// api/client.ts
import { createClient } from "@hyper-fetch/core";

export const apiClient = createClient({
  url: "https://my-api.com",
});

Creating Your First SDK

Let's walk through creating a simple SDK for a hypothetical "todos" API.

1. Setup the Client

First, we create a configured Client instance. This will be the entry point for our SDK.

api/client.ts

import { createClient } from "@hyper-fetch/core";

export const todosApi = createClient({
  url: "https://jsonplaceholder.typicode.com",
});

2. Define Requests

Next, we define the requests for our API endpoints.

api/todos.requests.ts

import { todosApi } from "./client";

// Define the type for a single todo item
interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

export const getTodos = todosApi.createRequest<Todo[]>()({
  endpoint: "/todos",
  method: "GET",
});

export const getTodo = todosApi.createRequest<Todo>()({
  endpoint: "/todos/:todoId",
  method: "GET",
});

3. Bundle and Export

Finally, we bundle our client and requests into a single entry point for our SDK.

api/index.ts

import { todosApi } from "./client";
import * as todos from "./todos.requests";

export const MySDK = {
  client: todosApi,
  todos,
};

4. Using the SDK

Now, in any application, we can use our SDK with full type safety.

app/components/todos-list.tsx

import { useFetch } from "@hyper-fetch/react";
import { MySDK } from "../api";

function TodosList() {
  const { data, loading } = useFetch(MySDK.todos.getTodos);

  if (loading) {
    return <div>Loading...</div>;
  }

  return <ul>{data?.map((todo) => <li key={todo.id}>{todo.title}</li>)}</ul>;
}

This is a simple example, but it demonstrates how easy it is to create a clean, maintainable, and type-safe SDK with Hyper Fetch.

Summary

You've learned how Hyper Fetch is an excellent choice for building SDKs. By leveraging its core features, you can create:

• Type-safe APIs that reduce bugs.
• Testable code that is easy to verify.
• Customizable clients that can adapt to any need.
• Reusable and shareable packages that accelerate development.