FROM API
TO HOOKS.

Enable React and include @domain-first/handlers-rest in Project Structure configuration. Run the CLI and select Add integration → Orval (React Query client). Both settings are required for this menu item.

npx df-ps

Choose the OpenAPI document path. When the OpenAPI integration has created a generation script, its document location supplies the default.

src/presentation/react/data-layer/
  orval.config.ts
  api-client/mutator.ts
  query-provider.tsx
  orval/  # hooks and models after client generation

The config generates TanStack Query v5 hooks using fetch, grouped by API tags, with schemas in the generated model folder. With Next declared, request URLs start with NEXT_PUBLIC_API_BASE_URL.

customInstance in the mutator handles every request and throws an ApiError containing the status and parsed response body on non-2xx responses. Add authentication, token refresh and shared request behavior here. QueryProvider supplies one QueryClient per browser session; wrap your app in it.

The mutator and provider are starting points and are preserved on repeated setup. The generated orval directory is added to .gitignore.

Install missing dependencies using the commands printed by the CLI: TanStack React Query for runtime and Orval as a development dependency. Then run:

npm run openapi

npm run client:orval

Import generated hooks and models from your data-layer/orval directory. Customize the mutator and application components, and regenerate the client when endpoint contracts change.