axios-query
is a package designed to integrate React Query with Axios. It provides a set of custom hooks and components for easy data fetching, mutation, and state management in React applications.
- Custom React Query Hooks: Integrated with Axios for data fetching and state management.
- Custom Error and Loading Components: Easily customize loading and error states. 🔄
- Popular Toast Package Support: Integrates with popular toast libraries such as react-toastify, react-hot-toast, and sonner. 📣
- Dead Simple Configurations: Easily configure and customize your setup. ⚙️
To install axios-query
, use npm or yarn:
npm install axios-query
# or
yarn add axios-query
- Setup
AxiosQueryProvider
First, wrap your application with the AxiosQueryProvider to provide the necessary context for the hooks.
import { AxiosQueryProvider } from "axios-query";
import { customAxiosInstance } from "./axios";
import { myErrorComp, myLoadingComp } from "./components";
const config = {
reactQuerySettings: {
// Same configurations as using useQueryClient
},
axiosSettings: {
axiosInstance: customAxiosInstance,
options: {
// Axios request configurations
},
},
toastSettings: {
package: "react-hot-toast",
options: {
// Options to customize your chosen toast package
},
},
// Global configs
errorComp: myErrorComp,
loadingComp: myLoadingComp,
displayToast: false,
formatErrorMessage: true,
};
function App() {
return (
<AxiosQueryProvider config={config}>
<>
<TodoForm />
<Todos />
</>
</AxiosQueryProvider>
);
}
- Using the
useQuery
Hook Fetch data with the useQuery hook and customize loading and error components:
import { useQuery } from "axios-query";
type TodoResponse = {
todos: {
id: string;
name: string;
}[];
};
export function Todos() {
const { Loader, Error, data } = useQuery<TodoResponse>({
route: "/todos",
queryKey: ["todos"],
loadingComp: () => <div>Loading Todos.. </div>, // Set custom components per hook usage
});
return (
<>
{Loader && <Loader />}
{Error && <Error />}
<ul>
{data?.todos.map((todo) => (
<li key={todo.id}>{todo.name}</li>
))}
</ul>
</>
);
}
- Using the
useMutate
Hook Perform mutations and handle success and error states:
import { useInvalidate, useMutate } from "axios-query";
export function TodoForm() {
const invalidateQueries = useInvalidate();
const { isPending, mutate: createTodo } = useMutate({
method: "post",
route: "/todos",
onSuccess(res) {
invalidateQueries({ queryKey: ["todos"] });
},
displayToast: true, // Disables the global config for this component
retryCount: 3,
toastMessages: {
success: "Created todo successfully!",
failed: "Failed to create todo",
},
});
return (
<form
onSubmit={(e) => {
e.preventDefault();
createTodo({ name: "publish package", id: 2 });
}}
>
<input name="todo" />
<button type="submit">Create Todo</button>
</form>
);
}
For detailed documentation and examples, please refer to the documentation.
We welcome contributions to axios-query. If you'd like to contribute, please follow these steps:
- Fork the repository.
- Create a new branch (git checkout -b feature/your-feature).
- Commit your changes (git commit -am 'Add new feature').
- Push to the branch (git push origin feature/your-feature).
- Open a pull request.