Read Data


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


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


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.

1import React from "react";
2import { FhirDataQuery } from "@commure/components-data";
4const MyComponent = () => (
5 <FhirDataQuery queryString="Patient?name=alex&_count=5">
6 {({ data, error, loading }) => {
7 if (loading) {
8 return "Loading...";
9 }
10 if (error) {
11 return "Error loading data!";
12 }
13 const patients: Patient[] = (data as Bundle).entry!.map(
14 value => value.resource as Patient
15 );
16 return `Found ${patients.length} Alex's!`;
17 }}
18 </FhirDataQuery>


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.

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


If you run into an error saying:

1No FhirClientProvider found in component tree

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

API Reference


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