Tulip Logo IconTulip
Inline

Setup

Basis setup voor Inline met provider, mutation contract en strategy.

Een inline veld heeft minimaal deze props nodig:

  • initialValue
  • mutation
  • strategy

variables is optioneel als de input-output exact overeenkomt met mutation variables.

Basisvoorbeeld

import { InlineProvider, InlineField, InlineFieldError, InlineStringInput } from "@tulip-systems/core/inline-edit/client";
import { z } from "zod";

<InlineProvider permission={{ project: ["update"] }}>
  <InlineField>
    <InlineStringInput
      initialValue={project.title}
      variables={(value) => ({ id: project.id, data: { title: value ?? undefined } })}
      mutation={orpc.projects.update.mutationOptions()}
      strategy={{ mode: "blur", validators: { onBlur: z.string().nullable() } }}
    />
    <InlineFieldError />
  </InlineField>
</InlineProvider>

Provider gebruik

Gebruik InlineProvider alleen wanneer je shared defaults wilt zetten voor een subtree:

  • permission
  • disabled

Geen shared defaults nodig? Dan kan je InlineProvider weglaten.

Mutation contract

Nieuwe standaard:

  • mutation={orpc.module.update.mutationOptions()}
  • variables={(value) => ...}

Dit sluit aan op de Commands API en houdt client code consistent.

On this page