@orval/solid-start

@orval/solid-start

SolidStart client for Orval - generates type-safe API client code using SolidStart primitives.

Features

• ✅ Generates SolidStart query() for GET requests
• ✅ Generates SolidStart action() for mutations (POST, PUT, PATCH, DELETE)
• ✅ Type-safe API calls
• ✅ Full TypeScript support
• ✅ Works with SolidStart's server-side execution model
• ✅ Uses native Fetch API by default
• ✅ Supports custom mutators with Fetch API signature

Installation

npm install @orval/solid-start
# or
bun add @orval/solid-start
# or
pnpm add @orval/solid-start

Usage

In your Orval configuration file:

import { defineConfig } from 'orval';

export default defineConfig({
  petstore: {
    output: {
      target: './src/api/endpoints.ts',
      schemas: './src/api/model',
      client: 'solid-start',
    },
    input: {
      target: './petstore.yaml',
    },
  },
});

Generated Code

For GET requests, Orval generates SolidStart queries:

export const PetstoreApi = {
  getPets: query(async (limit?: number) => {
    const response = await fetch(`/api/pets?limit=${limit}`, {
      method: 'GET',
      headers: { 'Content-Type': 'application/json' },
    });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json() as Promise<Pet[]>;
  }, 'getPets'),
};

For mutations (POST, PUT, PATCH, DELETE), Orval generates SolidStart actions:

export const PetstoreApi = {
  createPet: action(async (pet: Pet) => {
    const response = await fetch(`/api/pets`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(pet),
    });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json() as Promise<Pet>;
  }, 'createPet'),
};

Using in Your SolidStart App

import { PetstoreApi } from './api/endpoints';

// In a component
function Pets() {
  const pets = createAsync(() => PetstoreApi.getPets(10));

  return (
    <div>
      <For each={pets()}>
        {(pet) => <div>{pet.name}</div>}
      </For>
    </div>
  );
}

// For mutations
function CreatePet() {
  const createPet = useAction(PetstoreApi.createPet);

  const handleSubmit = async (formData: FormData) => {
    await createPet({ name: formData.get('name') as string });
  };

  return <form action={handleSubmit}>...</form>;
}

Comparison with solid-query

• @orval/solid-start: Uses native SolidStart primitives (query, action) for server-side data fetching
• @orval/solid-query: Uses TanStack Solid Query (createQuery, createMutation) for client-side data management

Choose solid-start when you want to leverage SolidStart's built-in server functions and caching. Choose solid-query when you need advanced client-side query management features like automatic refetching, optimistic updates, etc.