@afterschooldevelopment/request v1.1.0

@afterschooldevelopment/request

A helper library used by After School Development and affiliate frontend packages to perform HTTP requests. Written in TypeScript, uses axios in the background.

Installation

Run

yarn add @afterschooldevelopment/request

Usage

In the root of your project, import configureRequest and execute it to provide configuration to subsequent requests performed using the library:

import { configureRequest } from '@afterschooldevelopment/request';

configureRequest({ baseURL: API_BASE_URL, timeout: REQUEST_TIMEOUT });

Perform an actual HTTP request anywhere in the code:

import request from '@afterschooldevelopment/request';

const response = await request({ method: 'GET', url: 'example' });

Behind the scenes, request passes the arguments as is to axios. See more about possible options on https://github.com/axios/axios.

With useRequest hook

It's possible to perform HTTP requests directly in React components or create custom React hooks using the useRequest hook provided by the library:

import { useRequest } from '@afterschooldevelopment/request';

type DataType = { id: number; value: string };
type MetaType = { example: string };

const useRequestExample = () => {
  const [
    {
      data = [],
      statusCode,
      hasRequested,
      cancelSource,
      meta,
      isLoading,
      error,
    },
    makeRequest,
    { resetData, setHasNotRequested },
  ] = useRequest<DataType[], MetaType>();

  const fetch = (id: number) =>
    makeRequest({
      method: 'GET',
      url: `example/${id}`,
    });

  return [
    { data, meta, isLoading, error, statusCode, hasRequested, cancelSource },
    fetch,
    resetData,
    setHasNotRequested,
  ] as const;
};

export default useRequestExample;

The makeRequest function can also accept a second argument, an object that defines request options:

{
  // prop to indicate if we should clear or persist the data between requests.
  // default: false
   persistData: boolean,
}

Testing

Use createMock and mockResponse

import request, {
  createMock,
  mockResponse,
} from '@afterschooldevelopment/request';
import { render } from '@testing-library/react';

const mockAdapter = createMock(request);

const exampleMock = mockResponse({ method: 'GET', url: /example/ });

describe('<Example/>', () => {
  afterEach(() => {
    mockAdapter.reset();
  });

  it('should render with text "example"', async () => {
    exampleMock.reply(200, { data: [{ id: 1, text: 'example' }] });

    const { findByText } = render(<Example />);

    expect(await findByText('example')).toBeInTheDocument();
  });
});

The axios-mock-adapter with a modified API is used to mock HTTP requests. For more info, check https://github.com/ctimmerm/axios-mock-adapter.