PrescriberPharmacy
Guides

React Integration

Suggest Edits

Introduction

Photon provides a React-specific version of the JS Client. The library makes it easy to authenticate providers and write prescriptions from your clinical app.

Installation

npm install @photonhealth/react

Examples

Example applications are provided at our Github repository under examples

Getting Started

To setup the Photon Provider in React, you must construct a PhotonClient instance and pass it into the client parameter of the Provider

import React from 'react';
import ReactDOM from 'react-dom';
import { PhotonClient, PhotonProvider } from "@photonhealth/react";

const client = new PhotonClient({
  domain: "auth.photon.health",
  clientId: "YOUR_CLIENT_ID_SECRET",
  redirectURI: window.location.origin,
  organization: "org_XXX"
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <PhotonProvider client={client}>
    <App />
  </PhotonProvider>
);

📘

Development Mode

While the SDK is tooled to authenticate with production out of the box, you can easily switch it to using the APIs and authentication from our sandbox environment, Neutron.

Simply call .setDevelopment() on your Client instance.

Authenticating Users

When the PhotonProvider is instantiated, it will automatically watch the URL of the browser to search for code and state parameters to automatically handle the redirect flow of login

To enable a user to login, all you have to do is call the login method from the usePhoton Hook, like so:

const Login = () => {
  const { login } = usePhoton();

  return (
      <Button
        colorScheme="blue"
        onClick={() => login({})}
      >
        Login
      </Button>
  );
};

After a user has logged in, you may access their user information using the user observable from the usePhoton Hook:

function App() {
  const { isAuthenticated, isLoading, user } = usePhoton();
  return (
      <Container>
        {isLoading ? (
          <p>Loading...</p>
        ) : isAuthenticated ? (
          <Text>Name: {user.name}</Text>
        ) : (
          <Login />
        )}
      </Container>
  );
}

A user can easily be logged out using the logout method of the usePhoton Hook:

const Page = () => {
  const { logout } = usePhoton();

  return (
    <Button colorScheme="blue" onClick={() => logout({})}>
      Logout
    </Button>
  )
}

Creating a Prescription

const { createPrescription } = usePhoton()
const [createPrescriptionMutation, { loading, error }] = createPrescription({
    refetchQueries: ['getPrescriptions'],
    awaitRefetchQueries: true
})

const createPrescription = async () => {
  await createPrescriptionMutation({
    variables: {
      patientId: "pat_123",
      treatmentId: "med_123",
      dispenseAsWritten: false,
      dispenseQuantity: 30,
      dispenseUnit: "Each",
      refillsAllowed: 0,
      daysSupply: 30,
      instructions: "Take this prescription once every day with water"
    }
  })
}

Accessing Data

Our API provide data in two fashions:

  • Paginated
  • Non-Paginated

Below is an example of accessing our Patient API (paginated) and Prescription API. Non-paginated queries work in a similar fashion, but there is no need to keep track of and advanced the after parameter to the query.

const { getPatients, logout } = usePhoton();
  
const [rows, setRows] = useState([]);

//Retrieve patients in a paginated fashion
const { patients, loading, refetch } = getPatients({
    name: "John Doe",
});

useEffect(() => {
  if (!loading) {
  	setRows(patients) 
  }
}, [loading, patients])

//Fetch Next Page
const fetchNextPage = async () => {
  const { data } = await refetch({
    name: "John Doe",
    after: rows?.at(-1)?.id,
  });
  
  setRows(rows.concat(data?.patients));
}
...
//Create new patient
const { createPatient } = usePhoton()
//Refetch the getPatients query (from above) after executed
const [createPatientMutation, { loading, error }] = createPatient({
    refetchQueries: ['getPatients'],
    awaitRefetchQueries: true
})

const createPatient = async () => {
  await createPatientMutation({
    variables: {
      name: {
        first: "John",
        last: "Doe"
      },
      dateOfBirth: "1990-01-01",
      sex: "MALE",
      phone: "555-555-5555"
    }
  })
}

Updated over 2 years ago