Tuyau

https://tuyau.julr.dev/docs/introduction
Admin
Tuyau provides a set of tools for creating typesafe APIs with AdonisJS, including an E2E client like...
Tokens:6,794
Snippets:58
Trust Score:5.4
Update:1 year ago
Show doc for...
Tokens:
Raw
### Make GET Request with Query Parameters

Source: https://tuyau.julr.dev/docs/introduction/client

Example of a GET request to `/users` with query parameters for pagination and filtering.

```javascript
import { tuyau } from './tuyau'

// GET /users/1/posts?limit=10&page=1
await tuyau.users.$get({ query: { page: 1, limit: 10 } })
```

--------------------------------

### Make GET Request

Source: https://tuyau.julr.dev/docs/introduction/client

Example of performing a GET request to the `/users` endpoint using the Tuyau client's chaining syntax.

```javascript
import { tuyau } from './tuyau'

// GET /users
await tuyau.users.$get()
```

--------------------------------

### Install Tuyau Inertia Package

Source: https://tuyau.julr.dev/docs/introduction/inertia

Installs the `@tuyau/inertia` package using pnpm. Ensure you have `@tuyau/core` and `@tuyau/client` configured beforehand.

```shell
pnpm add @tuyau/inertia
```

--------------------------------

### Initialize pnpm Monorepo

Source: https://tuyau.julr.dev/docs/introduction/next-js

Initializes a new project with pnpm and sets up the workspace configuration to manage multiple packages within the monorepo.

```bash
pnpm init
```

--------------------------------

### Initialize Tuyau Client without API Routes

Source: https://tuyau.julr.dev/docs/introduction/installation

Initializes the Tuyau client using only the `ApiDefinition` type, omitting the runtime `api` object. This reduces frontend bundle size but sacrifices route helper functions. Route calls are made using paths, e.g., `tuyau.users.$get()`.

```javascript
import { createTuyau } from '@tuyau/client'

import type { ApiDefinition } from '@your-monorepo/server/api'

export const tuyau = createTuyau<{ definition: ApiDefinition }>({

baseUrl: 'http://localhost:3333',

})
```

--------------------------------

### Install Tuyau Client Package

Source: https://tuyau.julr.dev/docs/introduction/installation

Installs the Tuyau client package into your frontend project. This package utilizes the generated API definitions to provide type-safe access to your backend.

```shell
pnpm add @tuyau/client
```

--------------------------------

### Vue: Install TuyauPlugin

Source: https://tuyau.julr.dev/docs/introduction/inertia

Integrates Tuyau into a Vue x Inertia application by installing the `TuyauPlugin`. Pass your initialized Tuyau client instance during plugin setup.

```typescript
// inertia/app/app.ts

import { TuyauPlugin } from '@tuyau/inertia/vue'

import { tuyau } from './tuyau'

createInertiaApp({

// ...

setup({ el, App, props, plugin }) {

createSSRApp({ render: () => h(App, props) })

.use(plugin)

.use(TuyauPlugin, { client: tuyau })

.mount(el)

},

})
```

--------------------------------

### Create AdonisJS Backend Project

Source: https://tuyau.julr.dev/docs/introduction/next-js

Creates a new AdonisJS project within the 'apps' directory of the monorepo. This command scaffolds the backend application.

```bash
pnpm create adonisjs@latest backend
```

--------------------------------

### Making GET Requests with Query Parameters

Source: https://tuyau.julr.dev/docs/introduction/client

Shows how to perform a GET request using the `$get` method and pass query parameters. The library automatically serializes the query object into a URL query string.

```javascript
await tuyau.users.$get({
  headers: { 'X-Custom-Header': 'foobar' },
  query: { page: 1, limit: 10 }
})
```

--------------------------------

### Create Next.js Frontend Project

Source: https://tuyau.julr.dev/docs/introduction/next-js

Scaffolds a new Next.js project with TypeScript support in the 'apps/frontend' directory. This command sets up the client-side application.

```bash
pnpx create-next-app@latest frontend --typescript
```

--------------------------------

### Install @tuyau/openapi Package

Source: https://tuyau.julr.dev/docs/introduction/openapi

Installs the @tuyau/openapi package, which requires the @tuyau/core package to be pre-installed in your AdonisJS project. This command adds the necessary dependencies to your project.

```bash
node ace add @tuyau/openapi
```

--------------------------------

### Initialize Tuyau Client with API Routes

Source: https://tuyau.julr.dev/docs/introduction/installation

Initializes the Tuyau client by importing the `createTuyau` function and a runtime `api` object containing API definitions and routes. This approach allows for using route helpers like `$has`, `$current`, and `$route` in the frontend.

```javascript
import { createTuyau } from '@tuyau/client'

import { api } from '@your-monorepo/server/api'

export const tuyau = createTuyau({

api,

baseUrl: 'http://localhost:3333',

})
```

--------------------------------

### Naive API Client Example

Source: https://tuyau.julr.dev/docs/introduction/introduction

Demonstrates a basic, non-typesafe approach to creating an API client in JavaScript. This method requires manual type management and is prone to synchronization issues between backend and frontend.

```javascript
export class MyAPI {
  async getPosts(options) {
    return fetch(
      `/posts?page=${options.page}&limit=${options.limit}`
    )
  }

  async getPost(id: number) {
    return fetch(`/posts/${id}`)
  }
}
```

--------------------------------

### Configure pnpm Workspaces

Source: https://tuyau.julr.dev/docs/introduction/next-js

Defines the structure of the pnpm monorepo by specifying the directories where packages are located. This file is essential for pnpm to recognize and manage workspaces.

```yaml
# pnpm-workspace.yaml

packages:
- apps/*
```

--------------------------------

### Install Tuyau Core Package

Source: https://tuyau.julr.dev/docs/introduction/installation

Installs the core Tuyau package into your AdonisJS project. This package is essential for generating API type definitions.

```shell
node ace add @tuyau/core
```

--------------------------------

### Initialize Tuyau Client in Next.js

Source: https://tuyau.julr.dev/docs/introduction/next-js

Initializes the Tuyau client within the Next.js application by creating a configuration file. It specifies the API endpoint and base URL for communication.

```typescript
import { createTuyau } from '@tuyau/client'

import { api } from '@acme/server/api'

export const tuyau = createTuyau({
  api,
  baseUrl: 'http://localhost:3333',
})
```

--------------------------------

### File Uploads in React Native

Source: https://tuyau.julr.dev/docs/introduction/client

Provides an example of how to upload files in a React Native environment by passing file objects with `uri`, `type`, and `name` properties.

```javascript
await tuyau.users.$post({
  avatar: {
    uri: 'file://path/to/file',
    type: 'image/jpeg',
    name: 'avatar.jpg'
  }
})
```

--------------------------------

### Install Tuyau SuperJSON Package (Frontend)

Source: https://tuyau.julr.dev/docs/introduction/superjson

Installs the `@tuyau/superjson` package in your frontend project to enable SuperJSON data handling.

```shell
pnpm add @tuyau/superjson
```

--------------------------------

### Configure Next.js for Monorepo

Source: https://tuyau.julr.dev/docs/introduction/next-js

Configures the Next.js build process to handle monorepo dependencies and aliases. This includes setting up Webpack for module resolution and specifying packages to transpile.

```typescript
// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  reactStrictMode: true,
  transpilePackages: ['@acme/backend'],
  webpack: (config) => {
    config.resolve.extensionAlias = {
      '.js': ['.ts', '.tsx', '.js', '.jsx'],
      '.mjs': ['.mts', '.mjs'],
      '.cjs': ['.cts', '.cjs'],
    };
    return config;
  },
};

export default nextConfig;
```

--------------------------------

### Add Backend Reference to Frontend

Source: https://tuyau.julr.dev/docs/introduction/next-js

Includes a TypeScript reference file in the Next.js project to ensure proper type resolution for backend code. This helps in resolving potential type-related errors during development.

```typescript
/// <reference path="../config/auth.ts" />
```

--------------------------------

### Configure Frontend Package Dependency

Source: https://tuyau.julr.dev/docs/introduction/installation

Adds the server package as a workspace dependency in the frontend's package.json. This allows the frontend project to import the shared API definition.

```json
{
  "name": "@acme/frontend",
  "type": "module",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "@acme/server": "workspace:*"
  }
}
```

--------------------------------

### Import API Definition in Frontend

Source: https://tuyau.julr.dev/docs/introduction/installation

Imports the API definition from the shared server package into the frontend project. This enables type-safe API calls.

```typescript
import { api } from '@acme/server/api'
```

--------------------------------

### Install Tuyau SuperJSON Middleware (Backend)

Source: https://tuyau.julr.dev/docs/introduction/superjson

Adds the `@tuyau/superjson` package to your backend project and configures the `superjson_middleware` in `start/kernel.ts` to automatically serialize response data using SuperJSON when a `x-superjson` header is present.

```shell
node ace add @tuyau/superjson
```

--------------------------------

### Enable Experimental Decorators in tsconfig.json

Source: https://tuyau.julr.dev/docs/introduction/next-js

Enables experimental decorators in the TypeScript configuration file. This is necessary for certain features or libraries that rely on decorator syntax, preventing type-checking errors.

```json
{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}
```

--------------------------------

### Configure Server Package for API Export

Source: https://tuyau.julr.dev/docs/introduction/installation

Configures the server's package.json to export the generated API definition using subpath exports. This makes the API definition accessible to other projects in the monorepo.

```json
{
  "name": "@acme/server",
  "type": "module",
  "version": "0.0.0",
  "private": true,
  "exports": {
    "./api": "./.adonisjs/index.ts"
  }
}
```

--------------------------------

### Add Typecheck Script to Next.js package.json

Source: https://tuyau.julr.dev/docs/introduction/next-js

Adds a 'typecheck' script to the Next.js application's package.json file. This script allows for easy execution of TypeScript type checking using `tsc --noEmit`.

```json
{
  "scripts": {
    "typecheck": "tsc --noEmit"
  }
}
```

--------------------------------

### Generated API Type Definition

Source: https://tuyau.julr.dev/docs/introduction/introduction

Illustrates a simplified example of the TypeScript type definition generated by Tuyau. This file (`.adonisjs/api.ts`) contains inferred input and output types for routes, enabling type-safe API interactions.

```typescript
type Api = {
posts: {
$get: {
input: {
page?: number
limit?: number
}
output: {
id: number
title: string
}[]
}
}
}
```

--------------------------------

### Manually Generate API Types

Source: https://tuyau.julr.dev/docs/introduction/installation

Executes the Tuyau generation command within your AdonisJS project. This command creates necessary TypeScript types for your API, typically after adding new routes or controllers.

```shell
node ace tuyau:generate
```

--------------------------------

### Check Current Route Status

Source: https://tuyau.julr.dev/docs/introduction/client

Explains how to use the tuyau.$current method to get the current route name or verify if the current route matches a given name, pattern, or includes specific parameters.

```javascript
// Current window location is http://localhost:3000/users/1/posts/2, route name is users.posts.show
tuyau.$current() // users.posts
tuyau.$current('users.posts.show') // true
tuyau.$current('users.*') // true
tuyau.$current('users.edit') // false
```

```javascript
tuyau.$current('users.posts.show', { params: { id: 1, postId: 2 } }) // true
tuyau.$current('users.posts.show', { params: { id: 12 } }) // false
tuyau.$current('users.posts.show', { query: { page: 1 } }) // false
```

--------------------------------

### Generate Tuyau Types with SuperJSON Support

Source: https://tuyau.julr.dev/docs/introduction/superjson

After installing `@tuyau/superjson` in your AdonisJS project, run this command to generate updated types that reflect SuperJSON's capabilities, ensuring correct type inference for advanced data types.

```shell
node ace generate:tuyau
```

--------------------------------

### Initialize Tuyau Client with API Definition

Source: https://tuyau.julr.dev/docs/introduction/client

Demonstrates how to create a Tuyau client instance by providing the generated API object and a base URL for API requests.

```javascript
import { api } from '@your-monorepo/server/.adonisjs/api'

export const tuyau = createTuyau({
  api,
  baseUrl: 'http://localhost:3333',
})
```

--------------------------------

### Initialize Tuyau Client with Ky Options

Source: https://tuyau.julr.dev/docs/introduction/client

Illustrates passing additional options supported by the underlying Ky library, such as timeouts, custom headers, and request hooks.

```javascript
const tuyau = createTuyau({
  api,
  baseUrl: 'http://localhost:3333',
  timeout: 10_000,
  headers: { 'X-Custom-Header': 'foobar' },
  hooks: {
    beforeRequest: [
      (request) => {
        const token = getToken()
        if (token) {
          request.headers.set('Authorization', `Bearer ${token}`)
        }
      }
    ]
  }
})
```

--------------------------------

### Initialize Tuyau Client with ApiDefinition Type

Source: https://tuyau.julr.dev/docs/introduction/client

Shows how to initialize the Tuyau client using only the `ApiDefinition` type when route names are not needed for frontend functionality.

```typescript
import { createTuyau } from '@tuyau/client'
import type { ApiDefinition } from '@your-monorepo/server/.adonisjs/api'

export const tuyau = createTuyau<{ definition: ApiDefinition }>({
  baseUrl: 'http://localhost:3333',
})
```

--------------------------------

### Make Request using Route Name

Source: https://tuyau.julr.dev/docs/introduction/client

Demonstrates using the `$route` method with a named route ('posts.generateInvitation') and path parameters to construct and execute a request.

```javascript
import { tuyau } from './tuyau'

// Backend route example:
// router.get('/posts/:id/generate-invitation', '...').as('posts.generateInvitation')

// Client usage:
await tuyau
  .$route('posts.generateInvitation', { id: 1 })
  .$get({ query: { limit: 10, page: 1 } })
```

--------------------------------

### React: Manual Visits with useRouter

Source: https://tuyau.julr.dev/docs/introduction/inertia

Leverages the `useRouter` hook in React to programmatically trigger navigation. The `visit` method allows manual route changes with associated parameters.

```typescript
import { useRouter } from '@tuyau/inertia/react'

const router = useRouter()

router.visit('users.posts.show', { id: 1, postId: 2 })
```

--------------------------------

### Generate URL from Route Name

Source: https://tuyau.julr.dev/docs/introduction/client

Demonstrates how to generate URLs using route names and parameters with the tuyau.$url method. Supports named parameters and query parameters for flexible URL construction.

```javascript
// http://localhost:3333/users/1/posts/2
tuyau.$url('users.posts', { id: 1, postId: 2 })

// http://localhost:3333/venues/1/events/2
tuyau.$url('venues.events.show', [1, 2])

// http://localhost:3333/users?page=1&limit=10
tuyau.$url('users', { query: { page: 1, limit: 10 } })
```

```javascript
export const tuyau = createTuyau({
  api,
  baseUrl: 'http://localhost:3333'
})

window.route = tuyau.$url.bind(tuyau)
```

```javascript
export function MyComponent() {
  return (
    <div>
      <a href={route('users.posts', { id: 1, postId: 2 })}>Go to post</a>
    </div>
  )
}
```

--------------------------------

### Configure OpenAPI Documentation

Source: https://tuyau.julr.dev/docs/introduction/openapi

Shows how to customize the OpenAPI specification globally using the `openapi.documentation` property within the `config/tuyau.ts` file. This allows setting API metadata such as title, version, description, and defining tags.

```typescript
import { defineConfig } from '@tuyau/core';

const tuyauConfig = defineConfig({
  openapi: {
    documentation: {
      info: { title: 'My API!', version: '1.0.0', description: 'My super API' },
      tags: [
        { name: 'subscriptions', description: 'Operations about subscriptions' },
      ],
    },
  },
});
```

--------------------------------

### Make POST Request

Source: https://tuyau.julr.dev/docs/introduction/client

Demonstrates how to send a POST request to the `/users` endpoint with a JSON payload.

```javascript
import { tuyau } from './tuyau'

// POST /users { name: 'John Doe' }
await tuyau.users.$post({ name: 'John Doe' })
```

--------------------------------

### Handle Nested Path Parameters

Source: https://tuyau.julr.dev/docs/introduction/client

Illustrates how to construct requests with multiple nested path parameters by chaining object calls with parameter values.

```javascript
import { tuyau } from './tuyau'

// Backend route example:
// router.get('/users/:id/posts/:postId/comments/:commentId', '...')

// Frontend usage:
const result = await tuyau.users({ id: 1 })
  .posts({ postId: 2 })
  .comments({ commentId: 3 })
  .$get()
```

--------------------------------

### Customize API Spec with Router Macros

Source: https://tuyau.julr.dev/docs/introduction/openapi

Demonstrates how to use the `.openapi()` macro on routes to add custom information like tags, summaries, and descriptions directly within your route definitions. This allows for fine-grained control over the generated OpenAPI specification.

```typescript
router.group(() => {

  router
    .get("/random", [MiscController, "index"])
    .openapi({ summary: "Get a random thing" });

  router
    .get("/random/:id", [MiscController, "show"])
    .openapi({ summary: "Get a random thing by id" });

})
.prefix("/misc")
.openapi({ tags: ["misc"] });
```

--------------------------------

### Vue: Manual Visits with useRouter

Source: https://tuyau.julr.dev/docs/introduction/inertia

Employs the `useRouter` hook in Vue for programmatic navigation. The `visit` method facilitates manual route changes with associated parameters.

```typescript
<script setup lang="ts">
import { useRouter } from '@tuyau/inertia/vue'

const router = useRouter()
</script>

<template>
 <button @click="router.visit('users.posts.show', { id: 1, postId: 2 })">Go to post</button>
</template>
```

--------------------------------

### Making POST Requests with Custom Headers

Source: https://tuyau.julr.dev/docs/introduction/client

Demonstrates how to send a POST request using the `$post` method and include custom headers in the request. This is useful for authentication or passing specific metadata.

```javascript
await tuyau.users.$post({ name: 'John Doe' }, {
  headers: {
    'X-Custom-Header': 'foobar'
  }
})
```

--------------------------------

### OpenAPI Package Configuration Options

Source: https://tuyau.julr.dev/docs/introduction/openapi

Details the configuration options available for the @tuyau/openapi package in the `config/tuyau.ts` file. These options control the OpenAPI viewer, paths to exclude, endpoint URLs, and provider-specific settings.

```APIDOC
OpenAPI Configuration:
  Configuration is managed within the `config/tuyau.ts` file under the `openapi` key.

  Options:
    provider: string
      - Specifies the OpenAPI viewer to use. Available options are 'swagger-ui' and 'scalar'.
      - Defaults to 'scalar'.

    exclude: string | RegExp | (string | RegExp)[]
      - Defines paths to exclude from the OpenAPI specification generation.
      - Can be a single string, a RegExp, or an array of strings and RegExps.
      - Defaults to no paths excluded.
      - Example:
        exclude: ['/health', /admin/]

    endpoints: {
      spec?: string;
      ui?: string;
    }
      - Configures the URL endpoints for the OpenAPI specification and its UI.
      - `spec`: URL for the OpenAPI specification file (e.g., '/my-super-spec').
      - `ui`: URL for the OpenAPI documentation UI (e.g., '/my-super-doc').
      - Defaults: spec='/openapi', ui='/docs'.
      - Example:
        endpoints: {
          spec: '/my-super-spec',
          ui: '/my-super-doc'
        }

    scalar: object
      - Options to pass directly to the Scalar provider.
      - Refer to Scalar documentation for available properties: https://github.com/scalar/scalar?tab=readme-ov-file#configuration

    swagger-ui: object
      - Options to pass directly to the Swagger UI provider.
      - Refer to Swagger UI documentation for available properties: https://swagger.io/docs/open-source-tools/swagger-ui/usage/configuration/

Example Configuration Block:

const tuyauConfig = defineConfig({
  openapi: {
    provider: 'swagger-ui',
    exclude: ['/api/v1/health'],
    endpoints: {
      spec: '/api-spec.yaml',
      ui: '/api-docs'
    },
    swaggerUi: {
      // Swagger UI specific options
    }
  }
});
```

--------------------------------

### File Uploads with File Instance

Source: https://tuyau.julr.dev/docs/introduction/client

Explains how to upload files by passing `File` instances to the request payload. The library handles conversion to `FormData` and sets appropriate headers, utilizing the `object-to-formdata` package.

```html
<input type="file" id="file" />
```

```javascript
const fileInput = document.getElementById('file') as HTMLInputElement;
const file = fileInput.files[0];
await tuyau.users.$post({ avatar: file });
```

--------------------------------

### React: Wrap App with TuyauProvider

Source: https://tuyau.julr.dev/docs/introduction/inertia

Integrates Tuyau into a React x Inertia application by wrapping the root component with `TuyauProvider`. Pass your initialized Tuyau client instance to the provider.

```typescript
// inertia/app/app.tsx

import { TuyauProvider } from '@tuyau/inertia/react'

import { tuyau } from './tuyau'

createInertiaApp({

// ...

setup({ el, App, props }) {

hydrateRoot(
 el,
 <>
 <TuyauProvider client={tuyau}>
 <App {...props} />
 </TuyauProvider>
 </>
)
},

})
```

--------------------------------

### Inferring Request and Response Types

Source: https://tuyau.julr.dev/docs/introduction/client

Shows how to use helper types like `InferResponseType`, `InferErrorType`, and `InferRequestType` from the `@tuyau/client` package to automatically infer TypeScript types for API requests and responses.

```typescript
import type { InferResponseType, InferErrorType, InferRequestType } from '@tuyau/client';

// InferRequestType
type LoginRequest = InferRequestType<typeof tuyau.login.post>;

// InferResponseType
type LoginResponse = InferResponseType<typeof tuyau.login.post>;

// InferErrorType
type LoginError = InferErrorType<typeof tuyau.login.post>;
```

--------------------------------

### Make PUT Request with Path Parameter

Source: https://tuyau.julr.dev/docs/introduction/client

Shows how to make a PUT request to a specific user resource, identified by an ID, with an updated payload.

```javascript
import { tuyau } from './tuyau'

// PUT /users/1 { name: 'John Doe' }
await tuyau.users({ id: 1 }).$put({ name: 'John Doe' })
```

--------------------------------

### Filter Generated Routes Configuration

Source: https://tuyau.julr.dev/docs/introduction/client

Illustrates how to configure route filtering using `only` and `except` options in `config/tuyau.ts`. This allows control over which routes are generated for types and runtime usage.

```typescript
export default defineConfig({
  codegen: {
    definitions: {
      only: [/users/],
      // OR
      except: [/users/]
    },
    routes: {
      only: [/users/],
      // OR
      except: [/users/]
    }
  }
})
```

--------------------------------

### Generating API URLs

Source: https://tuyau.julr.dev/docs/introduction/client

Details the `$url()` method, which allows generating the URL for a specific route without making the actual API request. It supports nested routes and optionally accepts query parameters.

```javascript
const url = tuyau.users.$url();
console.log(url); // http://localhost:3333/users

const nestedUrl = tuyau.users({ id: 1 }).posts({ postId: 2 }).$url();
console.log(nestedUrl); // http://localhost:3333/users/1/posts/2

const urlWithQuery = tuyau.users.$url({ query: { page: 1, limit: 10 } });
console.log(urlWithQuery); // http://localhost:3333/users?page=1&limit=10
```

--------------------------------

### Unwrapping API Responses

Source: https://tuyau.julr.dev/docs/introduction/client

Explains the `unwrap()` method, which simplifies error handling by automatically throwing an error if the API response status is not 2xx, allowing for cleaner code when explicit error checks are not desired.

```javascript
const result = await tuyau.login.$post({ email: '[email protected]' }).unwrap();
console.log(result.token);
```

--------------------------------

### Typesafe API Client with Tuyau

Source: https://tuyau.julr.dev/docs/introduction/introduction

Illustrates how to use the Tuyau client for fully typesafe API interactions. It automatically generates a client from your AdonisJS API, ensuring parameters, payloads, and responses are type-checked by TypeScript.

```typescript
import { createTuyau } from '@tuyau/client'
import { api } from '@your-monorepo/my-adonisjs-app/.adonisjs/api'

export const tuyau = createTuyau({
  api,
  baseUrl: 'http://localhost:3333',
})

// Example usage:
const posts = tuyau.posts.$get({ page: 1, limit: 10 })
const post = tuyau.posts({ id: 1 }).$get()
```

--------------------------------

### API Response Handling and Type Narrowing

Source: https://tuyau.julr.dev/docs/introduction/client

Details the structure of promises returned by Tuyau requests, including `data`, `error`, `status`, and `response`. It emphasizes the need to narrow the response type to safely access `data` or `error` based on the status code.

```APIDOC
Response Structure:
  - data: The response data if the status is 2xx.
  - error: The error data if the status is 3xx.
  - status: The response's status code.
  - response: The full response object.

Usage Example:
// Backend
// class MyController { public async login({ request, response }) { ... } }
// router.post('/login', [MyController, 'login'])

// Frontend
const { data, error } = await tuyau.login.$post({ email: '[email protected]', password: 'password' });

// Type narrowing is crucial:
if (error?.status === 401) {
  console.error('Wrong password !!');
  return;
}
// Now 'data' is guaranteed to contain the successful response
console.log(data.token);
```

--------------------------------

### Configure Tuyau with SuperJSON Plugin

Source: https://tuyau.julr.dev/docs/introduction/superjson

Includes the SuperJSON plugin when creating the Tuyau instance in your frontend project. This plugin automatically adds the `x-superjson` header to requests and parses SuperJSON responses.

```typescript
import { superjson } from '@tuyau/superjson/plugin'

export const tuyau = createTuyau({
  api,
  baseUrl: `http://localhost:3333`,
  plugins: [superjson()]
})
```

--------------------------------

### React: Tuyau Link Component

Source: https://tuyau.julr.dev/docs/introduction/inertia

Uses the Tuyau `Link` component for type-safe navigation in React x Inertia. It replaces `href` with `route` and `method` with `params` for route definition.

```typescript
import { Link } from '@tuyau/inertia/react'

<Link route="users.posts.show" params={{ id: 1, postId: 2 }}>Go to post</Link>
```

--------------------------------

### AdonisJS Route with VineJS Validation

Source: https://tuyau.julr.dev/docs/introduction/introduction

Demonstrates defining an input validator using VineJS and integrating it into an AdonisJS controller for route payload validation. It also shows how to register the route with a specific name.

```typescript
import { HttpContext } from '@adonisjs/http-server'

import { vine } from 'vinejs'

export const getPostsValidator = vine.compile(
vine.object({
page: vine.number().optional(),
limit: vine.number().optional(),
})
)

export class PostsController {
public async index({ request }: HttpContext) {
const payload = await request.validateUsing(getPostsValidator)
return [
{ id: 1, title: 'Hello World' },
{ id: 2, title: 'Hello World 2' },
]
}

}

router.get('/posts', [PostsController, 'index']).as('posts.index')
```

--------------------------------

### Handling Lucid Model Type Information

Source: https://tuyau.julr.dev/docs/introduction/client

Provides solutions for type safety when returning Lucid Models, addressing the `ModelObject` type issue. It suggests using type casting or Data Transfer Objects (DTOs) for proper type inference.

```typescript
class UsersController {
  async edit({ inertia, params }: HttpContext) {
    const user = users.serialize() as {
      id: number
      name: string
    }
    return { user }
  }
}
```

```typescript
class UserDto {
  constructor(private user: User) {}
  toJson() {
    return {
      id: this.user.id,
      name: this.user.name
    }
  }
}

class UsersController {
  async edit({ inertia, params }: HttpContext) {
    const user = await User.findOrFail(params.id)
    return { user: new UserDto(user).toJson() }
  }
}
```

--------------------------------

### Vue: Tuyau Link Component

Source: https://tuyau.julr.dev/docs/introduction/inertia

Utilizes the Tuyau `Link` component for type-safe navigation in Vue x Inertia. It accepts `route` and `params` props instead of `href` and `method`.

```typescript
<script setup lang="ts">
import { Link } from '@tuyau/inertia/vue'
</script>

<template>
 <Link route="users.posts.show" :params="{ id: 1, postId: 2 }">Go to post</Link>
</template>
```

--------------------------------

### Check Route Existence

Source: https://tuyau.julr.dev/docs/introduction/client

Details the usage of the tuyau.$has method to determine if a route name exists within the application's routing configuration. Supports wildcard matching for flexible checks.

```javascript
tuyau.$has('users') // true
tuyau.$has('users.posts') // true
tuyau.$has('users.*.comments') // true
tuyau.$has('users.*') // true
tuyau.$has('non-existent') // false
```
Tokens:
Raw