mittwald API JavaScript client

This package contains a (mostly auto-generated) JavaScript client for the mittwald API.

License

Copyright (c) 2023 Mittwald CM Service GmbH & Co. KG and contributors

This project (and all NPM packages) therein is licensed under the MIT License; see the LICENSE file for details.

Table of contents

• Installing
• Usage
  • Using the v3-next client
  • Setting request parameters
    • Path parameters
    • Headers, query parameters and request body
    • Date and time values
• Example
• Usage in React
  • Installation
  • Setup
  • Usage
  • Example
• API documentation
• Accessing the underlying Axios instance
  • Adding custom HTTP headers
  • Intercepting requests or responses
• Usage with TypeScript
  • Importing types
• Migrating from package version V2 to V3

Installing

You can install this package from the regular NPM registry:

yarn add @mittwald/api-client

Usage

Import the client:

import { MittwaldAPIV2Client } from "@mittwald/api-client";

To create a client instance you can use one of the following factory method for different types of authentication:

1. MittwaldAPIClient.newUnauthenticated()
2. MittwaldAPIClient.newWithToken(apiToken: string) (recommended)
3. MittwaldAPIClient.newWithCredentials(email: string, password: string) (does actually perform a login in the background and thus returns a promise)

Have a look at our API introduction for more information on how to obtain an API token and how to get started with the API.

Using the v3-next client

The default import path exposes the v2 client. To use the production v3-next client, import it from the @mittwald/api-client/v3-next subpath:

import { MittwaldAPIClient } from "@mittwald/api-client/v3-next";

const mittwaldApi = MittwaldAPIClient.newWithToken("your-access-token");

The React client is available from the matching React subpath:

import { MittwaldAPIClientReact } from "@mittwald/api-client/v3-next/react";

TypeScript request and response types are exported through the MittwaldAPIV3Next namespace:

import { MittwaldAPIV3Next } from "@mittwald/api-client/v3-next";

This uses the published, non-development v3-next client. The package does not expose a @mittwald/api-client/v3-next-dev import path; the v3-next-dev OpenAPI spec is only used for generating development builds.

Setting request parameters

API requests may require these type of parameters:

• path parameters
• headers
• query parameters
• request body

Path parameters

Path parameters are variable parts of a URL path. They are typically used to point to a specific resource within a collection, such as a project identified by ID. A URL can have several path parameters, each denoted with curly braces { }.

/v2/projects/{projectId}

Path parameters are required and must be directly defined inside the request object.

// Setting the projectId path parameters
const project = await mittwaldApi.project.getProject({
  projectId: "p-xxxxx",
});

Headers, query parameters and request body

Depending on the operation, you must configure additional parameters, such as queryParameters (URL query parameters), headers (HTTP headers), and data (request body).

The operations and their parameters are documented in the API documentation.

When using TypeScript all parameter schemas are reflected by the request type, so you will get compile errors, when a request does not match the schema.

const response = await mittwaldApi.category.operation({
  // path parameters
  pathParameter1: "param1",
  pathParameter2: "param2",
  // parameters in header
  headers: {
    "x-header": "header",
  },
  // query parameters
  queryParameters: {
    queryParameter1: "queryParam1",
    queryParameter2: "queryParam2",
  },
  // JSON object in request body
  data: {
    data1: "data1",
    data2: "data2",
  },
});

Date and time values

Wherever the API expects a date and time (an ISO 8601 string in the API documentation), you can either pass that string yourself or simply pass a JavaScript Date. Date values are converted to ISO 8601 before the request is sent – in the request body (at any nesting depth), in query parameters, path parameters and headers.

await mittwaldApi.contract.terminateContractItem({
  contractId: "contract-id",
  contractItemId: "contract-item-id",
  data: {
    terminationTargetDate: new Date("2024-12-10"),
  },
});

Note that this applies to date-time values only. Date-only values (YYYY-MM-DD) still have to be passed as a string, and responses always contain strings, never Date objects.

Example

import { MittwaldAPIV2Client } from "@mittwald/api-client";

const mittwaldApi = MittwaldAPIClient.newWithToken("your-access-token");

const projects = await mittwaldApi.project.listProjects();

Usage in React

This package also provides a client aligned to be used in React components. It uses @mittwald/react-use-promise to encapsulate the asynchronous API functions into AsyncResources. More details about how to use AsyncResources see the package documentation.

Installation

To use the React client you have to install the additional @mittwald/react-use-promise package:

yarn add @mittwald/react-use-promise

Setup

To create a React client instance, you first need an instance of the regular (promise-based) client. Then you can use the .fromBaseClient(api) method to build the React client.

const api = MittwaldAPIV2Client.newUnauthenticated();
const apiReact = MittwaldAPIV2ClientReact.fromBaseClient(api);

Usage

The React client has an equivalent for every GET method of the regular client. The methods returning an AsyncResource that can be used to get the API responses.

If the response is not OK (status 200), an ApiClientError will be thrown. Errors can be handled by using error-boundaries. See the error handling section for more details.

Example

import { MittwaldAPIV2Client } from "@mittwald/api-client";
import { MittwaldAPIV2ClientReact } from "@mittwald/api-client/react";

const api = MittwaldAPIV2Client.newUnauthenticated();
const apiReact = MittwaldAPIV2ClientReact.fromBaseClient(api);

const ProjectsList = () => {
  // apiReact.project.listProjects() returns an AsyncResource that can be "used"
  const projects = apiReact.project.listProjects().use({
    autoRefresh: {
      seconds: 30,
    },
  });

  return (
    <ul>
      {projects.map((p) => (
        <li key={p.id}>{p.description}</li>
      ))}
    </ul>
  );
};

API documentation

The API documentation can be found at https://api.mittwald.de/v2/docs/. You can find the operation ID on the right side of each operation.

Accessing the underlying Axios instance

The client uses the popular Axios HTTP client under the hood. You may access the Axios instance with the clients axios property.

Adding custom HTTP headers

To add custom HTTP headers to all requests you can use Axios' defaults.headers property:

client.axios.defaults.headers["User-Agent"] = `your-tool/v1.2.3`;

Intercepting requests or responses

To intercept requests or responses you can use Axios' interceptors.

Usage with TypeScript

All response and request types can be imported from the MittwaldAPIV2 namespace.

Referencing request/response types

import { MittwaldAPIV2 } from "@mittwald/api-client";

type ProjectData = MittwaldAPIV2.Operations.ProjectGetProject.ResponseData;

// Reference "non-200" response type
type ProjectNotFoundData =
  MittwaldAPIV2.Operations.ProjectGetProject.ResponseData<404>;

type CreateProjectData =
  MittwaldAPIV2.Operations.ProjectCreateProject.RequestData;

Migrating from package version V2 to V3

This instruction considers migrating from package version V2 to V3, which has a breaking change in the call signature of request calls. The API itself has not changed and is still at version 2.

Path parameters are a primary component of the request and thus should not be "hidden" in the request config object. In V3 the API of the request configuration object has changed, and you have to set the path parameters directly in the root level of the request object.

// V2
mittwaldApi.project.getProject({
  pathParameters: {
    projectId: "p-xxxxx",
  },
});

// V3
mittwaldApi.project.getProject({
  projectId: "p-xxxxx",
});