Comment utiliser DataProvider pour la validation asynchrone côté serveur dans React-Admin ?

Question

Cette question fait référence au framework React-Admin et à la manière d'implémenter une fonctionnalité commune en utilisant les méthodes recommandées par les auteurs. Il ne s'agit pas de savoir comment demander des données à une API en utilisant purement React.

En utilisant le code à https://marmelab.com/react-admin/Validation.html#async-validation à titre d'exemple :

const validateUserCreation = async (values) => {
    const errors = {};

    // removed other checks that were here...

    const isEmailUnique = await checkEmailIsUnique(values.email);
    if (!isEmailUnique) {
        // Return a message directly
        errors.email = 'Email already used';
    }
    return errors
};

export const UserCreate = () => (
    <Create>
        <SimpleForm validate={validateUserCreation}>
            <TextInput label="First Name" source="firstName" />
            <TextInput label="Email" source="email" />
            <TextInput label="Age" source="age" />
        </SimpleForm>
    </Create>
);

Comment écririez-vous le checkEmailIsUnique pour interroger l'API à partir de la fonction UserCreate tout en utilisant le composant fournisseur de données au lieu d'écrire nos propres instructions de récupération comme le recommandent les auteurs ?

J'ai un scénario similaire dans lequel je dois valider l'unicité de la valeur d'un champ avant de créer ou de mettre à jour l'enregistrement. Pouvez-vous m'aider ?

\====Update===

J'ai écrit un composant comme :

import { TextInput, useDataProvider } from "react-admin";

const ERRORTEXT = "Name is not unique";

interface PartnerNameInputProps {
  source: string;
  [key: string]: any;
}

/**
 *
 * `PartnerNameInput` is used to validate if the entered value is available.
 * @example
 * <PartnerNameInput source='name' />
 *
 * In case of an invalid name, you can customize the error message using
 * `errortext` prop.
 */
const PartnerNameInput = ({
  source,
  ...props
}: PartnerNameInputProps): JSX.Element => {
  if (!source || !source.trim()) {
    throw new Error(`'source' must be a non-empty string`);
  }

  const dataProvider = useDataProvider();
  const { validate = [], errortext = ERRORTEXT, ...rest } = props;

  async function validateNameUnique(name: string) {
    if (!name) {
      return undefined;
    }

    let isvalid = true;
    try {
      const { data } = await dataProvider.getList("partners", {
        filter: { name },
        pagination: { page: 1, perPage: 10 },
        sort: { field: "id", order: "DESC" },
      });
      isvalid = data.length === 0;
    } catch (e) {
      console.error(e);
    }

    return isvalid ? undefined : errorobj;
  }

  const errorobj = { message: errortext };

  validate.push(validateNameUnique);

  return <TextInput source={source} validate={validate} {...rest} />;
};

export default PartnerNameInput;

Mais celle-ci ne résout pas le problème de l'action de mise à jour, seulement celui de l'action de création. Je suis toujours à la recherche d'une meilleure solution.

Nous vous remercions,

Answer 1

J'ai eu une expérience similaire question et je n'ai pas trouvé comment le résoudre en utilisant mon fournisseur de données, j'ai donc utilisé axios dans mon application react-admin.

Par conséquent, il ne s'agit pas exactement

B

const checkEmailIsUnique = async (enteredEmail) => {
  const data = await axios(withAuth({url:`${API_URL}/emails/${enteredEmail}`})) 
  return (data?.length > 0)   
}

const validateUserCreation = async (values) => {
  const errors = {}

  if (values.email) {
    if (await checkEmailIsUnique(values.email)) {
      errors.email = ‘email already used’
    }
  } else {
    errors.email = 'Email is required' 
  }
  ...
  return errors
}

…