Récupération et envoi de données

Les modules frontaux interagissent avec le serveur OpenMRS via les API exposées par ses modules. En général, la plupart des points de terminaison que nous utilisons sont fournis par le FHIR Module . La plupart des autres éléments sont fournis par le REST Module , qui est documenté ici .

Les points de terminaison du module FHIR devraient toujours être préférés, lorsqu’ils sont disponibles. FHIR est une norme d’interopérabilité qu’OpenMRS prend en charge.

Certaines données sont disponibles en utilisant des fonctions de plus haut niveau ou des hooks React personnalisés fournis par @openmrs/esm-framework. Utilisez ces exports publics du framework lorsqu’ils sont disponibles. En interne, ces API proviennent de packages comme @openmrs/esm-api, @openmrs/esm-emr-api et @openmrs/esm-react-utils, mais le code applicatif doit les importer depuis @openmrs/esm-framework. Voir la référence de l’API du framework.

FHIR

Pour utiliser l’API FHIR dans des composants React, préférez useOpenmrsSWR depuis @openmrs/esm-framework. Il encapsule SWR , appelle openmrsFetch et attache un abort controller afin que la requête puisse être annulée si le composant est démonté.

Voici un exemple d’utilisation de useOpenmrsSWR pour récupérer un patient depuis l’API FHIR.

import { fhirBaseUrl, useOpenmrsSWR } from "@openmrs/esm-framework";
 
const { data, error, isLoading, mutate } = useOpenmrsSWR<fhir.Patient>(`${fhirBaseUrl}/Patient/${patientUuid}`);
 
const patient = data?.data;

Si vous avez des questions sur le support de FHIR dans OpenMRS, vous pouvez les poser dans le canal Slack FHIR Squad .

Autres API du serveur OpenMRS

Certains points de terminaison administratifs n’auront probablement jamais de représentation appropriée dans FHIR (par exemple, les points de terminaison pour la gestion des types de rencontre). Lorsqu’aucun point de terminaison FHIR approprié n’est disponible, vous voudrez utiliser une autre API de serveur OpenMRS. L’API REST Web Services API  est largement utilisée dans un grand nombre de nos modules frontaux.

Voici un exemple de hook SWR personnalisé qui récupère les données de visites.

import { restBaseUrl, type Visit, useOpenmrsSWR } from "@openmrs/esm-framework";
 
interface VisitData {
  results: Array<Visit>;
}
 
/* Custom data fetching hook */
export function useVisits() {
  const url = `${restBaseUrl}/visit?includeInactive=false`;
 
  const { data, error, isLoading, mutate } = useOpenmrsSWR<VisitData>(url);
 
  return {
    visits: data?.data.results ?? [],
    isLoading,
    error,
    mutate,
  };
}

Nous pouvons utiliser ce hook useVisits dans notre composant visits comme suit:

function Visits() {
  const { visits, error, isLoading } = useVisits();
 
  if (isLoading) {
    return <DataTableSkeleton role="progressbar" />;
  }
  if (error) {
    // rendre l'etat d'erreur;
  }
  if (visits.length) {
    // rendre les visites;
  }
  return (
    // rendre l'etat vide;
  );
}
 
export default Visits;

La fonction mutate retournée par useOpenmrsSWR peut être utilisée pour mettre à jour le cache et déclencher un nouveau rendu du composant. C’est utile lorsque nous voulons mettre à jour l’interface utilisateur après une mutation réussie.

try {
  await saveVisitNote(payload);
  await mutate();
  closeWorkspace({ discardUnsavedChanges: true });
 
  // affiche le toast de succès
} catch (error) {
  // gère l'erreur
}

Envoyer des données au serveur

Voici un exemple qui démontre l’envoi de données de session au serveur.

import { openmrsFetch, sessionEndpoint } from "@openmrs/esm-framework";
 
const abortController = new AbortController();
 
const response = await openmrsFetch(sessionEndpoint, {
  method: "POST",
  body: {
    username,
    password,
  },
  signal: abortController.signal,
});
 
const session = response.data;

openmrsFetch préfixe automatiquement les chemins relatifs avec window.openmrsBase, demande des réponses JSON par défaut, sérialise les corps de requête qui sont des objets simples avant de les envoyer et renvoie un FetchResponse<T> dont le corps de réponse analysé est disponible dans response.data. Pour les URL FHIR sous fhirBaseUrl, il ajoute aussi _summary=data sauf si l’URL contient déjà un paramètre _summary.

La meilleure pratique pour les requêtes POST est de disposer d’une fonction AbortController . Vous devez vous assurer que AbortController.abort() est appelé lorsque le composant est démonté si la requête n’est pas encore terminée.

Dans un composant React, cela se fait généralement en effectuant la requête dans un hook useEffect:

useEffect(() => {
  const abortController = new AbortController();
  someFetchFunction(abortController).then(setResult).catch(setError);
  return () => abortController.abort();
}, []);

Objets de l’API

Certains objets de l’API sont mis à disposition via des crochets React (ou via des abonnements agnostiques au cadre). Importez les hooks et les équivalents par abonnement depuis @openmrs/esm-framework. Voir par exemple useVisitTypes et le correspondant getVisitTypes.