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.

1import React from "react";
2import { FhirDataQuery } from "@commure/components-data";
3
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>
19);

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.

1import React, { useState, useEffect } from "react";
2import {
3  withFhirDataQuery,
4  FhirDataQueryConsumer
5} from "@commure/components-data";
6import { Bundle } from "@commure/fhir-types/r4/types";
7
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]);
16
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>;
22};
23
24export default withFhirDataQuery(MyComponent);

Troubleshooting

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

FhirDataQuery

Prop Name	Required?	Type	Description
children	true	(state: State) => ReactNode	Function that will be rendered as children in the function-as-a-child pattern.
queryString	true	string	Query string for Commure backend GET request
renderWhileLoading	false	boolean	Render children while data is loading
useCache	false	boolean	Whether 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