データバリデータ

QwikCityのデータバリデータは、アクションとローダーのリクエストイベントとデータの検証に不可欠です。これらの検証は、関連するアクションまたはローダーの実行前にサーバー側で行われます。zod$()関数と同様に、Qwikはこの目的のために専用のvalidator$()関数を提供します。

import {
  type RequestEvent,
  type RequestEventAction,
  routeAction$,
  validator$,
} from "@builder.io/qwik-city";
 
export const useAction = routeAction$(
  async (data, requestEvent: RequestEventAction) => {
    return { foo: "bar" };
  },
  validator$(async (ev: RequestEvent, data) => {
    if (ev.query.get("secret") === "123") {
      return { success: true };
    }
    return {
      success: false,
      error: {
        message: "secret is not correct",
      },
    };
  }),
);

routeAction()にリクエストを送信する場合、リクエストイベントとデータは定義されたバリデータに対して検証されます。検証に失敗した場合、アクションは検証エラーをrouteAction.valueプロパティに配置します。

export default component$(() => {
  const action = useAction();
 
  // action value is undefined before submitting
  if (action.value) {
    if (action.value.failed) {
      // action failed if query string has no secret
      action.value satisfies { failed: true; message: string };
    } else {
      action.value satisfies { searchResult: string };
    }
  }
 
  return (
    <button onClick$={() => action.submit({ search: "foo" })}>Submit</button>
  );
});

複数のバリデータ

アクションとローダーには複数のバリデータを設定でき、それらは逆順に実行されます。次の例では、バリデータはvalidator3 -> validator2 -> validator1の順に実行されます。

const validator1 = validator$(/*...*/)
const validator2 = validator$(/*...*/)
const validator3 = validator$(/*...*/)
 
export const useAction = routeAction$(
  async (data, requestEvent: RequestEventAction) => {
    return { foo: "bar" };
  },
  validator1,
  validator2,
  validator3, // will be executed first
);

validator3の成功時の戻り値オブジェクトにdataプロパティがある場合、このデータは次のバリデータvalidator2に渡されます。元の送信データ上書きしたくない場合は、成功時の戻り値オブジェクトにdataプロパティを含めないでください。

export const useAction = routeAction$(
  async (data, requestEvent: RequestEventAction) => {
    console.log(data); // { message: "hi, I am validator1" }
    return { foo: "bar" };
  },
  // validator1
  validator$((ev, data) => {
    console.log(data); // { message: "hi, I am validator2" }
    return {
      success: true,
      data: {
        message: "hi, I am validator1",
      },
    };
  }),
  // validator2
  validator$((ev, data) => {
    console.log(data); // { message: "hi, I am validator3" }
    return {
      success: true,
      data: {
        message: "hi, I am validator2",
      },
    };
  }),
  // validator3
  validator$((ev, data) => {
    console.log(data); // Your submitted data
    return {
      success: true,
      data: {
        message: "hi, I am validator3",
      },
    };
  }),
);

戻り値オブジェクト

データバリデータは、戻り値オブジェクトに特定のプロパティを期待します。

検証成功

検証が成功するには、successプロパティがtrueである必要があります。

interface Success {
  success: true;
  data?: any;
}

検証失敗

interface Fail {
  success: false;
  error: Record<string, any>;
  status?: number;
}

バリデータは、失敗オブジェクトを返す場合、アクションまたはローダーでfail()メソッドを使用した場合と同様に動作します。

const status = 500;
const errorObject = { message: "123" };
 
export const useAction = routeAction$(
  async (_, { fail }) => {
    return fail(status, errorObject);
  },
  validator$(async () => {
    return {
      success: false,
      status,
      errorObject,
    };
  }),
);

アクションで`validator$()`と`zod$()`を併用する

アクションの場合、型付きデータバリデータzod$()はrouteAction$の2番目の引数とし、その後に他のデータバリデータvalidator$()を続けます。

export const useAction = routeAction$(
  async (data, requestEvent: RequestEventAction) => {
    return { foo: "bar" };
  },
  zod$(/*...*/),
  validator$(/*...*/),
  validator$(/*...*/),
);

貢献者

このドキュメントの改善に貢献してくださった皆様に感謝いたします！