@newfold/huapi-js

A JavaScript Client Library for HUAPI

Installation

$ yarn add @newfold/huapi-js
# yarn package installed

Usage

React Hooks

import { useHostingSites } from '@newfold/huapi-js';

const MyComponent = () => {
  const hostingId = '2';
  const { isLoading, data } = useHostingSites(hostingId);

  if (isLoading) return <h1>Loading...</h1>;

  return (
    <div>
      {data?.data?.rows?.map((site) => {
        <div key={site.id}>{site.name}</div>;
      })}
    </div>
  );
};

Mocking with custom handlers

Custom Mock Service Worker handlers can be imported directly from @newfold/huapi-js to easily manipulate your local application or unit tests in an offline testing setting.

First, ensure that Mock Service Worker is configured in your project, then import and add handlers during your setupWorker or setupServer calls as follows:

// import handlers to override data as needed for testing
import { getHostingSitesHandler } from '@newfold/huapi-js/src/handlers';

// add the handlers to your setupServer call
const server = setupServer(
  ...[
    // mock GET /hosting/:hosting-id/sites
    getHostingSitesHandler(),

    // add additional handlers here:
    // postHostingSite(),
  ]
);

Advanced handlers

Building from huapi

Eventually we would like to have an automatic CICD pipeline that kicks off when new huapi builds change the openapi.json specification file (OAS). For now, we can do this manually by running the build command locally and publishing to npm. This can be done with the following steps:

1. Ensure your repo is on the main branch and in a clean state locally (no unstaged changes)

2. Run nx build huapi-js to pull down the OAS file from the beta server (requires VPN) and create new build files

3. Change current directory to ./dist/libs/huapi-js

4. Publish to npm with yarn publish --access public [or to use npm first manually update the version in package.json and git commit/push this change, then use npm publish --access public to publish the changes]

   NOTE: You may need to request permissions to publish to the npm registry. Please speak to your manager to request access for this through the Hosting Engineering Leadership Team. Please provide your npmjs.com username with your request, and ensure 2FA Authentication is enabled in your npmjs.com dashboard.

Development

Adding Endpoints

@newfold/haupi-js is based on the OpenAPI specification file that is published by the core huapi project. To add new endpoints, update the core project and publish an updated file, then ensure the build script in package.json is pointed to it.

# run the build command to build a new verions
$ yarn build
# building @newfold/huapi-js...

Adding Custom Mock Handlers