Front API Library

A React hooks library for interacting with GraphQL APIs, built with TypeScript and powered by React Query and graphql-request.

Features

• 🚀 React Query Integration - Built-in caching, background updates, and optimistic updates
• 📝 TypeScript Support - Full type safety with comprehensive TypeScript definitions
• 🔄 GraphQL Ready - Uses graphql-request for efficient GraphQL operations
• 🛡️ Authentication - Built-in support for authentication flows
• 🛒 E-commerce Ready - Hooks for products, cart, payments, and orders
• 💳 Payment Integration - Support for Stripe and MTN Mobile Money

Installation

npm install front-api-library

Peer Dependencies

This library requires React Query and React to be installed in your project:

npm install @tanstack/react-query react react-dom

Quick Start

1. Setup React Query in your app:

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* Your app components */}
    </QueryClientProvider>
  );
}

2. Use the hooks in your components:

import { useLogin, useGetProducts } from "front-api-library";

function LoginForm() {
  const loginMutation = useLogin("your-api-endpoint", "your-token");

  const handleLogin = () => {
    loginMutation.mutate({
      email: "[email protected]",
      password: "password",
    });
  };

  return (
    <button onClick={handleLogin} disabled={loginMutation.isPending}>
      {loginMutation.isPending ? "Logging in..." : "Login"}
    </button>
  );
}

function ProductList() {
  const { data, isLoading, error } = useGetProducts(
    "your-api-endpoint",
    "your-token",
    1, // current page
    "electronics", // category
    "smartphone" // search term
  );

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      {data?.products.products.map((product) => (
        <div key={product.id}>{product.name}</div>
      ))}
    </div>
  );
}

API Reference

Authentication Hooks

useLogin(endpoint, token)

Authenticates a user with email and password.

const loginMutation = useLogin(endpoint, token);
loginMutation.mutate({ email: string, password: string });

useRegister(endpoint, token)

Registers a new user account.

const registerMutation = useRegister(endpoint, token);
registerMutation.mutate({ email: string, name: string, password: string });

useChangePasswordAfterReset(endpoint, token)

Changes user password after a reset request.

useResetPassword(endpoint, token)

Initiates a password reset flow.

Product Hooks

useGetProducts(endpoint, token, currentPage, category?, search?, vehicleId?)

Fetches paginated products with optional filtering.

useGetSingleProduct(endpoint, token, slug)

Fetches a single product by slug.

useGetSingleProductById(endpoint, token, id)

Fetches a single product by ID.

useGetAdditionnalProduct(endpoint, token, productId)

Fetches additional/related products.

Category & Brand Hooks

useGetCategory(endpoint, token)

Fetches product categories.

useGetBrand(endpoint, token)

Fetches product brands.

User Management Hooks

useUpdateUser(endpoint, token)

Updates user profile information.

useUpdatePassword(endpoint, token)

Updates user password.

useUpdateAdress(endpoint, token)

Updates user address information.

useGetUserCommand(endpoint, token)

Fetches user's order history.

Cart & Orders

useCreateCartCreate(endpoint, token)

Creates a new cart or adds items to existing cart.

Payment Hooks

useConfirmStripePayment(endpoint, token)

Confirms a Stripe payment.

useCreateMtnTransaction(endpoint, token)

Creates an MTN Mobile Money transaction.

useGetMtnStatus(endpoint, token)

Checks the status of an MTN Mobile Money payment.

Other Hooks

useContactUs(endpoint, token)

Sends a contact form message.

useGetWebsiteSettings(endpoint, token)

Fetches website configuration and settings.

TypeScript Support

The library includes comprehensive TypeScript definitions. All hooks are fully typed, including:

• Request parameters
• Response data structures
• Error types
• Loading states

Import types as needed:

import type { TUser, TProduct, TLoginResponse } from "front-api-library";

Error Handling

All hooks return React Query's standard error handling:

const { data, error, isLoading, isError } = useGetProducts(/* ... */);

if (isError) {
  console.error("API Error:", error.message);
}

For mutations:

const mutation = useLogin(endpoint, token);

mutation.mutate(loginData, {
  onSuccess: (data) => {
    console.log("Login successful:", data);
  },
  onError: (error) => {
    console.error("Login failed:", error.message);
  },
});

Version History

• 1.0.5 - Current version with comprehensive hook collection