@noonahq/noona-hq-api

Noona Typescript Client

This client uses Orval to generate the client from noona-api's OpenAPI spec. It both exports Typescript interfaces and creates React Query wrappers as well.

Installation

yarn

yarn add @noonahq/noona-api-hq react-query

npm

(meteor) npm install --save @noonahq/noona-api-hq react-query

Install/update w.r.t. specific tag/branch

For each branch in the noona-api project, a NPM tag is published with it.

Example to install the package that correlates with the dev branch, use

yarn add @noonahq/noona-api-hq@dev

Setup

Configure axios

import axios from "axios";

axios.interceptors.request.use(async (config) => {
  const newConfig: AxiosRequestConfig = {
    ...config,
    baseURL: "https://api.noona.is",
    headers: {
      // Use HQ-ACCESS-KEY if Tímatal
      "NOONA-ACCESS-KEY": "XXX",
    },
  };

  return newConfig;
});

📘 The client package itself doesn't install axios. This is due to the fact that if the client also has axios installed, two instances are present and thus configuring it in your client won't work.

Configure react-query

Follow the quick start chapter in React Query's documentation, creating a QueryClient instance and wrap a QueryClientProvider around your application.

📘 Meteor + React + Blaze creates a new ReactDOM.render instance, resulting in Context values not being drilled down the DOM tree properly. The author of the library suggests wrapping every "level 3" React component with the provider - in our case, ReactQueryProvider. See the link for more details.

Usage

Interfaces

import { Company } from "@noonahq/noona-api-hq";

Queries

import { useListCompanies } from "@noonahq/noona-api-hq";

const { data, isLoading } = useListCompanies({
  company_type_id: companyTypeId,
  geolocation: {
    lat: location?.latLng?.lat ?? 0,
    lng: location?.latLng?.lng ?? 0,
  },
  sort_by: "popular",
});

const companies = data?.data;