kitcn

Type Inference

Infer input and output types from your Convex API.

Usage

Access nested procedure types using bracket notation:

src/components/user-card.tsx
import type { ApiInputs, ApiOutputs } from '@convex/api';

// Output types
type User = ApiOutputs['user']['get'];
type UserList = ApiOutputs['user']['list'];
type Post = ApiOutputs['post']['get'];

// Input types
type GetUserArgs = ApiInputs['user']['get'];
type CreatePostArgs = ApiInputs['post']['create'];

In Components

Use output types for component props:

src/components/user-profile.tsx
import type { ApiOutputs } from '@convex/api';

type User = ApiOutputs['user']['get'];

function UserProfile({ user }: { user: User }) {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

In Utility Functions

Use both input and output types for type-safe utilities:

src/lib/utils/user.ts
import type { ApiInputs, ApiOutputs } from '@convex/api';

type User = ApiOutputs['user']['get'];
type UpdateUserArgs = ApiInputs['user']['update'];

function formatUserName(user: User): string {
  return user.name ?? 'Anonymous';
}

function validateUpdateArgs(args: UpdateUserArgs): boolean {
  return !!args.name || !!args.email;
}

Deep Nested Types

For deeply nested APIs, chain bracket notation:

// api.organization.members.list
type OrgMember = ApiOutputs['organization']['members']['list'][number];

// api.project.settings.get
type ProjectSettings = ApiOutputs['project']['settings']['get'];

Tip: Use [number] to extract the item type from array return types.

Next Steps

On this page