Comparison

// You define this manually
interface User {
  id: string;
  name: string;
  email: string;
}

// API changes "email" to "emailAddress"
// TypeScript doesn't know - runtime error!
const user = await axios.get<User>('/users/123');
console.log(user.data.email); // undefined at runtime

// Schema is the source of truth
const schemas = IgniterCallerSchema.create()
  .path('/users/:id', (path) =>
    path.get({
      responses: {
        200: z.object({
          id: z.string(),
          name: z.string(),
          emailAddress: z.string(), // API changed this
        }),
      },
    })
  )
  .build();

const { data } = await api.get('/users/:id').execute();
console.log(data.emailAddress); // TypeScript knows the correct field

import { useCaller } from '@igniter-js/caller/client';

function UserProfile({ id }: { id: string }) {
  const api = useCaller('main');
  
  const { data, isLoading } = api.get('/users/:id')
    .params({ id })
    .useQuery({ staleTime: 10_000 });
  
  return <div>{data?.name}</div>;
}

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

function UserProfile({ id }: { id: string }) {
  const { data, isLoading } = useQuery({
    queryKey: ['user', id],
    queryFn: () => axios.get(`/users/${id}`).then(r => r.data),
  });
  
  return <div>{data?.name}</div>;
}