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

Install

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

or

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

Usage

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

GraphQL Usage

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

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.

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.

Examples

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

GraphQL Query

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)

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

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

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: "[email protected]",
});

console.log(user);

REST Request with Headers

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

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