@bapp/auto-api-client v2.0.13

@bapp/auto-api-client

Generic API to request data from and trigger actions in the Bapp API.

Roadmap

• Functions for the generic endpoints
• Generate Zod schemas for client-side validation
• Type inference for filters, payload and response

Installation

Install the package using one of the following commands:

npm i @bapp/auto-api-client axios

yarn add @bapp/auto-api-client axios

pnpm i @bapp/auto-api-client axios

Optionally, install @tanstack/react-query for query option getters:

npm i @tanstack/react-query

yarn add @tanstack/react-query

pnpm i @tanstack/react-query

Types

Type generation

The package includes a bin script to generate the types from a host. Rerun it everytime you want to sync client types with server types. At the moment it only generates types for contentType and taskCode. Use it by running:

npx auto-api-client <API_HOST> <path/to/generated/file.ts>

yarn auto-api-client <API_HOST> <path/to/generated/file.ts>

pnpm auto-api-client <API_HOST> <path/to/generated/file.ts>

Example: npx auto-api-client https://panel.bapp.ro/api src/auto-api-generated.ts

Registering types

Add the following somewhere in your project, ideally before the place where you instantiate BappAutoApi.

import { Mapping } from "./auto-api-generated";

declare module "@bapp/auto-api-client" {
  interface Register {
    mapping: Mapping;
  }
}

API

Core

BappAutoApi methods

Components

Hooks

Utils

React Query

Option getters

Using another host

import _axios from "axios";

const axios = _axios.create({ baseURL: /* API Host here */ });
const bappAutoApi = new BappAutoApi({ axiosInstance: axios });

Authentication

Authentication can be done through axios options or interceptors.

Using axios initial options

import _axios from "axios";

const axios = _axios.create({ baseURL: /* API Host here */, headers: {
  Authorization: `Token ${/* Static token here */}`
} });
const bappAutoApi = new BappAutoApi({ axiosInstance: axios });

Using axios interceptors

const bappAutoApi = new BappAutoApi({ axiosInstance: axios });

bappAutoApi.axiosInstance.interceptors.request.use(async (config) => {
  const token = await getToken();

  if (!token) return config;

  config.headers.set(
    "Authorization",
    `Bearer ${token}`
  );

  return config;
})

Using the provider

The provider is useful for changing part or all of the config used to make requests. It can be used to change the tenantId or appSlug for part of the React component tree. If you are correctly passing the config to TanStack Query getters using useBappAutoApiConfig, then you can just add the provider somewhere above the component with the query to change how the request is being done.

Example:

<BappAutoApiConfigProvider bappAutoApi={bappAutoApi} tenantId="37" appSlug="erp">
  {children}
</BappAutoApiConfigProvider>

Integrating with TanStack Router

To integreat with TanStack Router, you can use the TanStack Router context API to provide the bappAutoApiConfig, then using it through Route.useRouteContext() or passing it to the BappAutoApiProvider and using it with useBappAutoApiConfig(). More documentation on this topic is to come.

Example usage

Vanilla

import BappAutoApi, { getEntityListQueryOptions } from "@bapp/auto-api-client";

import { Mapping } from "./auto-api-generated";

declare module "@bapp/auto-api-client" {
  interface Register {
    mapping: Mapping;
  }
}

const bappAutoApi = new BappAutoApi(); // Defaults to https://panels.bapp.ro/api

bappAutoApi.listEntities("core.country", {
  filter: { someQueryParam: "value" },
});

React w/ TanStack Query

It is recommened to use this with the BappAutoApiConfigProvider, see Using the provider.

import {
  getEntityListQueryOptions,
  useBappAutoApiConfig,
} from "@bapp/auto-api-client";

const bappAutoApiConfig = useBappAutoApiConfig();
const listQuery = useQuery({
  ...getEntityListQueryOptions(contentType, {
    config: bappAutoConfig,
    filter: { someQueryParam: "value" },
  })},

  // Other query options
);