You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

front-api-library

Package Overview
Dependencies
Maintainers
1
Versions
34
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

front-api-library

A library to make it easy to use the front-api

1.0.33
latest
npmnpm
Version published
Weekly downloads
2.1K
538.41%
Maintainers
1
Weekly downloads
 
Created
Source

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

  • 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>
  );
}
  • 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: "user@example.com",
      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

FAQs

Package last updated on 14 Jul 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts