@obeliskbr/request

A helper library used in Kyte frontend packages to perform HTTP requests. Written in TypeScript, uses axios in the background.

Installation

Run

yarn add @obeliskbr/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 '@obeliskbr/request';

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

Perform an actual HTTP request anywhere in the code:

import request from '@obeliskbr/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 '@obeliskbr/request';

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

const useRequestExample = () => {
  return useRequest<DataType[], MetaType>({
    method: 'GET',
    url: '/api/users/me',
  });
};

export default useRequestExample;

The useRequest 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,
   // prop to indicate an initial state, avoiding therefore an initial request
  // default: undefined
   initialData: any,
}

Testing

Use createMock and mockResponse

import request, { createMock, mockResponse } from '@obeliskbr/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.

Contributing

Contributions to this project are welcome. After cloning the repo, use the following instructions:

Installing dependencies

yarn install

Running locally

yarn dev

Running tests

yarn test:watch

Deploying

We've a CI/CD for publishing automatically to NPM once a branch is merged into master. The step to publish to NPM should be manually triggered. Make sure to bump the package version before.