SWD Axios Query

A lightweight library that simplifies making API requests in React applications. Combines the power of Axios and React Query for seamless API interactions, caching, and state updates.

---

Table of Contents

• Features
• Installation
• Quick Start
• Full Example
• Core API Reference
• Optional & Advanced Features
  • Axios Interceptors
  • Global Loading/Error State Context
• Contribution & Feedback

---

Features

Feature	Description
Easy-to-use hooks	For GET, POST, PUT, DELETE requests
Global Axios/React Query config	Set base URL, headers, and query options
Query provider	Manages React Query client context
Custom headers/base URL	Add/override headers and base URL globally
React Query Devtools support	Enable devtools for debugging
NEW: Axios interceptors	Add/remove request/response interceptors globally
NEW: Global loading/error context	Track all API loading/error states with a single provider/hook

---

Installation

1npm install swd-axios-query
2# or
3yarn add swd-axios-query

---

Quick Start

1. Configure the Package

1import { configureSWDQuery } from 'swd-axios-query';
2
3configureSWDQuery({
4  baseURL: 'https://api.example.com',
5  headers: { Authorization: 'Bearer your_token_here' },
6  defaultOptions: { retry: 1, refetchOnMount: true },
7});

2. Wrap Your App

1import { SWDQueryProvider } from 'swd-axios-query';
2
3<SWDQueryProvider enableDevTools={true}>
4  <App />
5</SWDQueryProvider>

3. Use Hooks in Components

1import { useGet } from 'swd-axios-query';
2
3const { data, error, isLoading } = useGet(['todos'], '/todos');

---

Full Example

1import React from 'react';
2import ReactDOM from 'react-dom';
3import {
4  SWDQueryProvider,
5  SWDGlobalStatusProvider,
6  configureSWDQuery,
7  addRequestInterceptor,
8  addResponseInterceptor,
9  useGlobalStatus,
10  useGet
11} from 'swd-axios-query';
12
13// Configure once at app startup
14configureSWDQuery({ baseURL: 'https://api.example.com' });
15
16// Optional: Add interceptors
17addRequestInterceptor(config => {
18  config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
19  return config;
20});
21addResponseInterceptor(
22  response => response,
23  error => {
24    if (error.response?.status === 401) {
25      // Handle unauthorized globally
26    }
27    return Promise.reject(error);
28  }
29);
30
31function GlobalSpinner() {
32  const { isLoading } = useGlobalStatus();
33  return isLoading ? <div className="spinner">Loading...</div> : null;
34}
35
36function Todos() {
37  const { data, isLoading, error } = useGet(['todos'], '/todos');
38  if (isLoading) return <p>Loading...</p>;
39  if (error) return <p>Error: {error.message}</p>;
40  return <ul>{data.map(todo => <li key={todo.id}>{todo.title}</li>)}</ul>;
41}
42
43ReactDOM.render(
44  <SWDQueryProvider>
45    <SWDGlobalStatusProvider>
46      <GlobalSpinner />
47      <Todos />
48    </SWDGlobalStatusProvider>
49  </SWDQueryProvider>,
50  document.getElementById('root')
51);

---

Core API Reference

configureSWDQuery(config)

Configures the library with custom settings.

• Parameters:
  • config (object): { baseURL, headers, defaultOptions }
• Returns: void

SWDQueryProvider

Wrap your app to provide React Query context.

• Props:
  • children (ReactNode): The application to wrap.
  • queryClient (QueryClient, optional): Custom React Query client.
  • enableDevTools (boolean, optional): Enable React Query Devtools.

Data Hooks

• useGet(queryKey, queryUrl, options)
• usePost(queryKey, queryUrl, options)
• usePut(queryKey, queryUrl, options)
• useDelete(queryKey, queryUrl, options)
• useSuspenseGet(queryKey, queryUrl, options)

Parameters:

• queryKey (array): Unique key for the query/mutation.
• queryUrl (string): API endpoint.
• options (object, optional): React Query options.

Returns:

• For queries: { data, error, isLoading, ... }
• For mutations: { mutate, mutateAsync, isLoading, error, ... }

---

Optional & Advanced Features

Axios Request/Response Interceptors

Add or remove Axios interceptors globally for authentication, logging, or error handling.

Add a request interceptor:

1import { addRequestInterceptor } from 'swd-axios-query';
2const reqId = addRequestInterceptor(config => { /* ... */ return config; });

Add a response interceptor:

1import { addResponseInterceptor } from 'swd-axios-query';
2const resId = addResponseInterceptor(
3  response => response,
4  error => Promise.reject(error)
5);

Remove an interceptor:

1import { ejectRequestInterceptor, ejectResponseInterceptor } from 'swd-axios-query';
2ejectRequestInterceptor(reqId);
3ejectResponseInterceptor(resId);

---

Global Loading/Error State Context (Optional)

Track loading and error state for all API requests in your app with a single provider and hook.

Setup:

1import { SWDGlobalStatusProvider } from 'swd-axios-query';
2<SWDGlobalStatusProvider>
3  <App />
4</SWDGlobalStatusProvider>

Usage:

1import { useGlobalStatus } from 'swd-axios-query';
2const { isLoading, error } = useGlobalStatus();

• This feature is optional. If you don't use the provider, nothing changes in your app.

---

Contribution & Feedback

We welcome contributions and feedback!

• Report bugs or request features: Open an issue or pull request.
• Questions or suggestions: Contact the maintainer or open a discussion.
• Found a security issue? Please report it privately.

---

Thank you for using SWD Axios Query!