Request Payload Data Type

When sending data to a server, for instance with POST or PUT requests, ensuring the payload structure is correct is essential. Hyper-fetch provides a way to define a payload type for your requests. This gives you compile-time safety, preventing common errors and making your API interactions more reliable.

What you'll learn

1. How to define a payload type for a request that sends data.
2. How to pass a type-safe payload when sending the request.
3. How this improves developer experience with autocompletion and error checking.

Why is it helpful?

• Data Integrity: Ensures that the data sent to the server matches the expected structure, preventing 400 Bad Request errors.
• Type Safety: Provides compile-time validation for the payload, catching errors before the code is even run.
• Developer Experience: Offers autocompletion for payload properties, speeding up development and reducing typos.
• Clear API Contracts: The typed request serves as clear documentation for what data an endpoint expects.

---

Example

By defining a payload type in the createRequest generic, you enforce a strict structure for the data sent with the .send() method.

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

export const client = createClient()({
  url: "https://api.example.com",
});

// 1. Define the response type for the creation endpoint
type User = { id: number; name: string; email: string; age: number };
type ResponseType = User;

// 2. Define the type for the request payload
type RequestPayloadType = {
  name: string;
  email: string;
  age: number;
};

// 3. Create the request, specifying the response and payload types
const postUser = client.createRequest<{
  response: ResponseType;
  payload: RequestPayloadType;
}>()({
  method: "POST",
  endpoint: "/users",
});

// 4. Send the request with a type-safe payload
// The `data` property in the `send` method is now strongly typed.
// Try adding a property that doesn't exist in `RequestPayloadType` to see an error.
const { data, error } = await postUser.send({
  data: {
    name: "Jane Doe",
    email: "jane.doe@example.com",
    age: 30,
  },
});

if (data) {
  console.log("Successfully created user:", data);
}

---

Congratulations!

You've learned how to define and use payload types!

• You can specify a payload type for requests that send data to a server.
• You can provide a type-safe data object to the .send() method.
• You can build more reliable API interactions with compile-time checks.