POST

React FHIR Client

2020/12/02zeevo

React Hooks for fhirclient.

1. Install it using npm

npm i react-fhirclient

or with yarn:

yarn add react-fhirclient

2. Add FhirClientProvider to your ReactDOM tree.

ReactDOM.render(
  <React.StrictMode>
    <FhirClientProvider>
      <App />
    </FhirClientProvider>
  </React.StrictMode>,
  document.getElementById("root"),
);

3. Use useFhirClient() in your hooks.

import { useState, useEffect } from "react";
import { useFhirClient } from "react-fhirclient";
 
function App() {
  const [patient, setPatient] = useState();
  const fhirclient = useFhirClient();
 
  return <div className="App"></div>;
}
 
export default App;

4. Make FHIR Requests in useEffect

import { useState, useEffect } from "react";
import { useFhirClient } from "react-fhirclient";
 
function App() {
  const [patient, setPatient] = useState();
  const fhirclient = useFhirClient();
 
  useEffect(() => {
    const getPatient = async () => {
      if (fhirclient) {
        const patient = await fhirclient.request(
          `Patient/${fhirclient.patient.id}`,
        );
        setPatient(patient);
      }
    };
    getPatient();
  }, []);
 
  return (
    <div className="App">
      <pre>
        <code>{JSON.stringify(patient, null, 2)}</code>
      </pre>
    </div>
  );
}
 
export default App;

FAQ:

"Why do we need the if (fhirclient) guard?"

Due to authentication with the authorization server being an asynchronous process, there will be a moment when the client is not instantiated and thus will be undefined.

In the Future

Supporting any FHIR client would be beneficial to the community. If you have a FHIR client that you want supported, raise an Issue describing it.