Quickstart

This tutorial assumes you have a Client ID and Client Secret for the HealthHero Traversal API and have a basic understanding of react. View client authentication for more info.

Our NPM library offers a lot of customisability in a react app without having to build an entire traversal client yourself. We recommend building an authentication proxy into the backend of your website to authenticate with the traversal api, but for the purposes of this tutorial we will set up the client to call the traversal api directly with a bearer token.

Request a token

curl --request POST \
  --url 'https://<paste_Identity_Url_here>/connect/token' \
  --header 'content-type: application/x-www-form-urlencoded' \
  --data grant_type=client_credentials \
  --data client_id=CLIENT_ID \
  --data client_secret=CLIENT_SECRET

You will recieve a body like this, store the access token for later.

{
  "access_token": "TOKEN",
  "expires_in": 3600,
  "token_type": "Bearer",
  "scope": "traversal.engine"
}

At this point you should have an empty react app with react and react-dom installed. A good starting place is Create React App.

For a very simple traversal client you will need the @doctorlink/traversal-redux and @doctorlink/styled-components packages. Install them using npm i along with the styled-components and react-redux peer dependencies.

npm i @doctorlink/traversal-redux @doctorlink/styled-components styled-components react-redux

Before rendering your react components you will need to create a store for the traversal state. The @doctorlink/traversal-redux package uses redux and redux-saga to make requests to the traversal api and keep the state in a format for easy use with react. You can build the traversal redux reducers and sagas into your own store, but we also export a simple class that does this for you which is perfect if you dont need to use these libraries in any other part of your app.

Import TraversalStore from the package and create a new instance of the class passing in the url to the traversal engine api. replace CLIENT_ID with your details.

import { TraversalStore } from "@doctorlink/traversal-redux";

const clientId = "CLIENT_ID";
const traversalEngineApi =
  "https://<paste-Traversal-Url-here>/api/v1/" +
  clientId +
  "/";
  
const urls = { engine: traversalEngineApi };

const traversalStore = new TraversalStore(urls);

For this quickstart example we will immediately dispatch an action to our store. This will send a traversal post request and update our store with the result.

Add traversalPostRequest to the import and we will set the store's bearer token to the one we retrieved earlier and dispatch the action, replacing params with a product you have access to.

import {
  TraversalStore,
  traversalPostRequest,
} from "@doctorlink/traversal-redux";

const bearerToken = "TOKEN";
const params = { shortCode: "XYZ" };

traversalStore.setToken(bearerToken);
traversalStore.store.dispatch(traversalPostRequest(params));

So now we have a store that will immediately create a traversal, ready to be rendered by react.

The @doctorlink/styled-components package uses styled-components and react-redux to create react componenets for rendering your traversal store.

We will import the createTheme function to add some custom styling to our app.

import { createTheme } from "@doctorlink/styled-components";

const theme = createTheme({
  colors: {
    brand50: "#edecec",
    brand100: "#B8A34A",
    brand200: "#B8A34A",
    lightBlue100: "#ecad00",
  },
  typography: {
    fontFamily: "courier",
  },
  spacing: {
    vertical: 25,
  },
});

Finally we will import the TraversalApp component which wraps an out of the box traversal client in a react-redux provider and styled componenets theme provider and render our app.

import { TraversalApp, createTheme } from "@doctorlink/styled-components";

ReactDOM.render(
  <TraversalApp store={traversalStore.store} theme={theme} />,
  document.getElementById("root")
);

When you start your app you should see a traversal client rendered and you can begin traversing. Your app entry file should look like this:

import React from "react";
import ReactDOM from "react-dom";
import { TraversalStore, traversalPostRequest} from "@doctorlink/traversal-redux";
import { TraversalApp, createTheme } from "@doctorlink/styled-components";

const clientId = "CLIENT_ID";
const traversalEngineApi =
  "https://<paste-Traversal-Url-here>/api/v1/" +
  clientId +
  "/";

const urls = { engine: traversalEngineApi };

const traversalStore = new TraversalStore(urls);

const bearerToken = "TOKEN";
const params = { shortCode: "XYZ" };

traversalStore.setToken(bearerToken);
traversalStore.store.dispatch(traversalPostRequest(params));

const theme = createTheme({
  colors: {
    brand50: "#edecec",
    brand100: "#B8A34A",
    brand200: "#B8A34A",
    lightBlue100: "#ecad00",
  },
  typography: {
    fontFamily: "courier",
  },
  spacing: {
    vertical: 25,
  },
});

ReactDOM.render(
  <TraversalApp store={traversalStore.store} theme={theme} />,
  document.getElementById("root")
);

Congratulations, you built your first Traversal Client!