Availity Starter React

Simple Template Project For React Web Apps on the Availity Portal

Resources

The following are links to documentation for building an app at Availity

• Availity GitHub Repositories
• Availity Workflow Tutorial
• Availity Component Docs
• Availity JavaScript SDK Docs

Usage

Running the App

Install the dependencies and run the app

yarn
yarn start

Data Fetching

This template uses React Context and react-query to handle state and data fetching. You can find more information about React Context here and react-query here

Why this combo?

Most web apps, especially at Availity, require fetching data. react-query provides many tools to allow for a better developer and user experience. It has easy to use loading states, error handling, and caching. We use Context as the state manager. Context does have potential scaling performance concerns, but these can normally be minimized with good design, data flow, and use of react-query caching.

Quick Guide on react-query

The main concept to focus on when using react-query and its cache are the use of keys.

Every time this hook is called it will check if there is data available for the key user

async function fetchUser() {
  return AvUsersApi.me();
}

const useCurrentUser = () => useQuery('user', () => fetchUser());

const Component = () => {
  const { data: user, isLoading } = useCurrentUser();

  if (isLoading) return null;

  return <p>{user ? user.name : 'A user has no name'}</p>;
};

Note: the useCurrentUser hook is available in @availity/hooks

react-query also exposes a useMutation hook. This helps with handling loading and error states more easily as there is no useState variable to toggle on off.

async function updateUser(variables) {
  return updateUserInfo(variables);
}

const Component = () => {
  const { mutate, isLoading, error } = useMutation(updateUser);

  return <button onClick={() => mutate({ active: false })}>Disable User</button>;
};

Note: the SearchForm component has an example of a useMutation in action