npm package: @oxygenx-frontend/axios-interface-client
Description: Unified Axios interface for REST and GraphQL services
Latest version: 1.3.5

# OxygenX Axios Interface Client

A unified Axios interface for interacting with **GraphQL services** and **REST APIs** without repeatedly writing service wrappers.

This package provides reusable utilities for:

- GraphQL requests using **QueryStringBuilder**
- REST API calls using **Axios service interfaces**
- Consistent API communication across frontend applications

<a href="https://www.npmjs.com/package/@oxygenx-frontend/axios-interface-client">
<img src="https://img.shields.io/npm/dt/@oxygenx-frontend/axios-interface-client?label=Downloads" alt="downloads" />
</a>

---

## Install

`npm install @oxygenx-frontend/axios-interface-client --save`

or

`yarn add @oxygenx-frontend/axios-interface-client`

---

## Usage

```typescript
import {
  AxiosClient,
  GraphQLService,
  QueryStringBuilder,
} from "@oxygenx-frontend/axios-interface-client";
```

---

## GraphQL Usage

Use `QueryStringBuilder` to construct GraphQL queries and `GraphQLService` to execute them.

```typescript
import {
  AxiosClient,
  GraphQLService,
  QueryStringBuilder,
} from "@oxygenx-frontend/axios-interface-client";

const http = new AxiosClient("https://api.example.com");

const graphql = new GraphQLService({
  baseURL: "/graphql",
  client: http,
});

const query = new QueryStringBuilder()
  .setOperation("getUsers")
  .setFields(["id", "name", "email"])
  .build();

const response = await graphql.request(query);

console.log(response);
```

---

## REST API Usage

Use `RestService` for standard RESTful API requests.

```typescript
import { AxiosClient } from "@oxygenx-frontend/axios-interface-client";

const api = new AxiosClient("https://api.example.com");

const users = await api.get("/users");

console.log(users);
```

---

## Options

Configuration options when initializing a service instance.

<table width="100%">
<thead>

<tr>
<th>Name</th>
<th>Description</th>
<th>Type</th>
<th>Required</th>
<th>Example</th>
</tr>

</thead>
<tbody>

<tr>
<td>baseURL</td>
<td>Base URL of the API endpoint</td>
<td>String</td>
<td>Yes</td>
<td>
<code>/api</code><br/>
<code>https://api.example.com</code>
</td>
</tr>

<tr>
<td>headers</td>
<td>Custom request headers</td>
<td>Object</td>
<td>No</td>
<td>
<code>{ Authorization: "Bearer token" }</code>
</td>
</tr>

<tr>
<td>timeout</td>
<td>Request timeout in milliseconds</td>
<td>Number</td>
<td>No</td>
<td>
<code>5000</code>
</td>
</tr>

</tbody>
</table>

---

## Examples

1. GraphQL Query
2. GraphQL Query with Variables
3. REST GET Request
4. REST POST Request
5. Example with Axios

---

### GraphQL Query

```javascript
import {
  GraphQLService,
  QueryStringBuilder,
} from "@oxygenx-frontend/axios-interface-client";

const query = new QueryStringBuilder()
  .setOperation("users")
  .setFields(["id", "name", "email"])
  .build();

const service = new GraphQLService({ baseURL: "/graphql" });

const response = await service.request(query);

console.log(response);
```

---

### GraphQL Query (with variables)

```javascript
import {
  AxiosClient,
  GraphQLService,
  QueryStringBuilder,
} from "@oxygenx-frontend/axios-interface-client";

const http = new AxiosClient("https://api.example.com");

const graphql = new GraphQLService({
  baseURL: "/graphql",
  client: http,
});

const query = new QueryStringBuilder()
  .setOperation("user")
  .setVariables({ id: 1 })
  .setFields(["id", "name", "email"])
  .build();

const response = await graphql.request(query);

console.log(response);
```

---

### REST GET Request

```javascript
import { AxiosClient } from "@oxygenx-frontend/axios-interface-client";

const api = new AxiosClient("https://api.example.com", {
  headers: {
    Authorization: "Bearer token",
  },
});

const users = await api.get("/users");
```

---

### REST POST Request

```javascript
import { AxiosClient } from "@oxygenx-frontend/axios-interface-client";

const api = new AxiosClient("https://api.example.com");

const user = await api.post("/users", {
  name: "John Doe",
  email: "john@example.com",
});

console.log(user);
```

---

### REST Request with Headers

```javascript
import { AxiosClient } from "@oxygenx-frontend/axios-interface-client";

const api = new AxiosClient("https://api.example.com", {
  headers: {
    Authorization: "Bearer token",
  },
});

const users = await api.get("/users");
```

---

### Using QueryStringBuilder with Native Axios

```javascript
import axios from "axios";
import { QueryStringBuilder } from "@oxygenx-frontend/axios-interface-client";

const query = new QueryStringBuilder()
  .setOperation("users")
  .setFields(["id", "name"])
  .build();

async function getUsers() {
  const response = await axios.post("/graphql", query);

  console.log(response.data);
}
```

---

## Architecture

```
Application
   ↓
@oxygenx-frontend/axios-interface-client
   ↓
Axios HTTP Client
   ↓
GraphQL / REST APIs
```

---

## Author

**Jeff Ofobrukweta**  
Frontend Engineering Manager — OxygenX

---

## Contributors

Frontend Engineering Team — OxygenX

If you are interested in contributing, feel free to open issues or submit pull requests.

---

## License

MIT License