Making Requests

Available Hooks#

For most basic operations you have access to a specific hook that provides the necessary functions to call that make the requests for you. Below you will see a table listing some of the available hooks and what each can do:

Hook	Type	Description
`useCurrentUser`	object	Returns an object containing the current logged in user's data.
`useAccountApi`	{ searchAccounts, searchAccountsByItemId, getUserInfo, getUserInfoById, getUserAvatarUrl, clearUserInfoCache, clearUserAvatarCache }	Make user specific requests.
`useAuthenticationContext`	{ getIsAuthenticated, onRequestToken, onHandleError, getCurrentEmail, setToken }	Returns information about the currently logged in user's authentication.
`useEnvironmentConfig`	object	Returns information about the client's environment.
`useNotificationContext`	{ showErrorText, showInfo, showError, showWarning, showSuccess, hideNotification, showToast, showToastWarning, dismissToast }	Makes it possible to show or hide notifications and toasts.
`useTheme`	object	Returns information about the current theme.
`useSubscriptionHandlePathBuilder`	string	Builds a url pointing to the current subscription.
`useReachApiEndPoints`	{ apiEndpoint }	Returns a url pointing to the Reach API

Custom Requests#

Sometimes you may want to make a custom request for your needs. For any request you make against the Reach API you are required to provide an Access Token.

You can retrieve the currently logged in user's token by calling onRequestToken which is available from the useAuthenticationContext hook. Please keep in mind that getting the token is an asyncronous operation, meaning you will have to either await it or use a .then() call.

Let's see an example:

import { FC, useEffect } from 'react';
import { useAuthenticationContext, PluginProps } from '@reach/core';

export const MyTokenPrinterPlugin: FC<PluginProps> = () => {
  const { onRequestToken } = useAuthenticationContext();

  useEffect(() => {
    // this method will get the token of the currently logged in user
    onRequestToken().then(console.log);
  }, []);

  return null;
};

In the example above we log the user's access token to the console as soon as it becomes available.

After you've acquired the access token, you can make authenticated requests. As an example, here we fetch the current user's data using his/her token.

const reachApiUrl = 'https://api.reach.livetiles.io/api/v1';

async function fetchUserData(token: string) {
  return await fetch(`${reachApiUrl}/users/current?essentialOnly=true`, {
    method: 'GET',
    credentials: 'include',
    headers: {
      Authorization: token,
    },
  }).then((response) => response.json());
}

Let's incorporate this into our component which will display the user's display name by making an authenticated request. Please keep in mind that you can get all of the required information from the useCurrentUser hook, this is for demonstration purposes only.

note

Also the token returned by the onRequestToken should not be stored or cached in any way. The token should be requested before each request to ensure the token is valid and not expired.

import { FC, useEffect, useState } from 'react';
import {
  useAuthenticationContext,
  useReachApiEndPoints,
  PluginProps,
} from '@reach/core';

export const MyTokenPrinterPlugin: FC<PluginProps> = () => {
  const [displayName, setDisplayName] = useState<string>(null);
  const { apiEndpoint } = useReachApiEndPoints();
  const { onRequestToken } = useAuthenticationContext();

  useEffect(() => {
    fetchUserData.then((user) => setDisplayName(user.displayName));
  }, []);

  return <p>{displayName ?? 'Loading...'}</p>;

  async function fetchUserData() {
    const token = onRequestToken();

    return await fetch(`${apiEndpoint}/users/current?essentialOnly=true`, {
      method: 'GET',
      credentials: 'include',
      headers: {
        Authorization: token,
      },
    }).then((response) => response.json());
  }
};