A React hooks library for interacting with GraphQL APIs, built with TypeScript and powered by React Query and graphql-request.
- 🚀 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
npm install front-api-library
This library requires React Query and React to be installed in your project:
npm install @tanstack/react-query react react-dom
- 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>
);
}
Authenticates a user with email and password.
const loginMutation = useLogin(endpoint, token);
loginMutation.mutate({ email: string, password: string });
Registers a new user account.
const registerMutation = useRegister(endpoint, token);
registerMutation.mutate({ email: string, name: string, password: string });
Changes user password after a reset request.
Initiates a password reset flow.
Fetches paginated products with optional filtering.
Fetches a single product by slug.
Fetches a single product by ID.
Fetches additional/related products.
Fetches product categories.
Fetches product brands.
Updates user profile information.
Updates user password.
Updates user address information.
Fetches user's order history.
Creates a new cart or adds items to existing cart.
Confirms a Stripe payment.
Creates an MTN Mobile Money transaction.
Checks the status of an MTN Mobile Money payment.
Sends a contact form message.
Fetches website configuration and settings.
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";
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);
},
});
- 1.0.5 - Current version with comprehensive hook collection