スキーマ駆動の申請フォームを保存する

前提条件

Appkit の両パッケージと React 19・React DOM 19 をインストールしてください。認証済みバックエンドに接続する DataAccessAdapter を用意します。

公開インポート

フォーム: @alneas/appkit-react/tools/form
プロバイダー: @alneas/appkit-react/tools/data-access/react
契約: @alneas/appkit-core/data
CSS: @alneas/appkit-react/styles

実装手順

import { useState, type ComponentProps } from 'react';
import type { DataAccessAdapter } from '@alneas/appkit-core/data';
import { QueryClientProvider } from '@tanstack/react-query';
import { createQueryClient, DataAccessProvider } from '@alneas/appkit-react/tools/data-access/react';
import { FormView } from '@alneas/appkit-react/tools/form';
import '@alneas/appkit-react/styles';

const schema: ComponentProps<typeof FormView>['schema'] = {
  type: 'object',
  properties: {
    name: { type: 'string', title: 'Name', minLength: 2 },
    reason: { type: 'string', title: 'Reason', 'x-ui': { widget: 'textarea' } },
  },
  required: ['name'],
};
export function RequestForm({ adapter }: { adapter: DataAccessAdapter }) {
  const [client] = useState(createQueryClient);
  const [saved, setSaved] = useState('');
  return <QueryClientProvider client={client}><DataAccessProvider adapter={adapter}>
    <FormView testId="persistence" collection="records" mode="create" schema={schema}
      validation={{ emptyStrings: 'preserve', locale: 'en', cast: { numericMode: 'strict' } }}
      onSuccess={record => setSaved(JSON.stringify(record))} />
    <output aria-label="Persisted">{saved}</output>
  </DataAccessProvider></QueryClientProvider>;
}

検証

無効な名前では保存されず、保存が拒否された場合は再試行のために入力が保持されることを確認してください。onSuccess がサーバーで確定した結果を受け取ることも確認します。以前の個別パッケージ向けの手順は Chromium で検証済みで、統合後のパッケージ構成は別途検査しています。偽のアダプターによる検証は、データベースへの永続化を保証するものではありません。

トラブルシューティングとよくある問題

onSave を使用する場合も、QueryClientProvider と DataAccessProvider を維持してください。認可、マイグレーション、バージョン確認、永続的な冪等性はサーバー側で実施します。すでにコミット済みの可能性がある操作を再試行する前に、バックエンドの動作上の契約を確認してください。