Read Data

Introduction

Components for fetching FHIR data from the Commure FHIR API.

Both of the below components provide functionality to get data, but they support different styles of writing components.

Included Components

  1. FhirDataQuery: Component for reading FHIR data
  2. withFhirDataQuery: Higher-Order Component for getting an authenticated query function

Usage

For both of these components, be sure to wrap them in <CommureSmartApp/>.

FhirDataQuery

Requires a queryString as a prop and one child that, given data on the query, returns a ReactNode. This component handles the logic around managing state for the query and passes that state directly to the function you supply as a child.

When you need more direct control over how the flow around the query works, prefer withFhirDataQuery.

import React from "react";
import { FhirDataQuery } from "@commure/components-data";
const MyComponent = () => (
<FhirDataQuery queryString="Patient?name=alex&_count=5">
{({ data, error, loading }) => {
if (loading) {
return "Loading...";
}
if (error) {
return "Error loading data!";
}
const patients: Patient[] = (data as Bundle).entry!.map(
value => value.resource as Patient
);
return `Found ${patients.length} Alex's!`;
}}
</FhirDataQuery>
);

withFhirDataQuery

This component provides an asynchronous query function as a prop to search for data. This query function takes in a string to query for and an optional object for more control over the query. The typical way to use this component is to write a function that takes in this query function and uses it to render some data.

This component shines when you need direct control over the query that you issue. If you just care about a simple query string and the data or errors you get back, prefer FhirDataQuery.

import React, { useState, useEffect } from "react";
import {
withFhirDataQuery,
FhirDataQueryConsumer
} from "@commure/components-data";
import { Bundle } from "@commure/fhir-types/r4/types";
const MyComponent = (props: FhirDataQueryConsumer) => {
const { query } = props;
const [bundle, setBundle] = useState<Bundle | undefined>(undefined);
useEffect(() => {
query("Patient?name=alex&_count=5")
.then((response: Response) => response.clone().json())
.then(data => setBundle(data));
}, [query]);
// check if the query resulted in an error
if (!bundle || bundle.resourceType === "OperationOutcome") {
return <div>Error querying for data</div>;
}
return <div>Found {(bundle as Bundle).entry!.length} Alex's</div>;
};
export default withFhirDataQuery(MyComponent);

Troubleshooting

If you run into an error saying:

No FhirClientProvider found in component tree

make sure that you have wrapped these components in a <CommureSmartApp/>.

API Reference

FhirDataQuery

Prop NameRequired?TypeDescription
childrentrue(state: State) => ReactNodeFunction that will be rendered as children in the function-as-a-child pattern.
queryStringtruestringQuery string for Commure backend GET request
renderWhileLoadingfalsebooleanRender children while data is loading
useCachefalsebooleanWhether to cache the result of this request. If enabled, result to the request will be cached until the window is closed. Subsequent requests won't make a network request. Useful for fetching data that is not expected to change, such as StructureDefinitions or SearchParameters.

Related Reading

Commure FHIR API
Write Data