rtk-query-axios
v1.0.1
Published
Run npx rtk-query-axios to add RTK Query + Axios (redux folder + deps) to your app
Maintainers
masud90895Readme
rtk-query-axios
Add RTK Query + Axios to your React or Next.js app in one command.
Quick start
npx rtk-query-axiosThis installs @reduxjs/toolkit, react-redux, axios, js-cookie and copies a ready redux/ folder into your project:
src/redux— if your project has asrc/folderredux/— at project root otherwise
Overwrite an existing folder:
npx rtk-query-axios --forceSetup (3 steps)
1. Environment — .env.local:
NEXT_PUBLIC_API_BASE_URL=https://your-api.com/api2. Provider — wrap your app:
// app/layout.tsx
import ReduxProvider from "@/redux/Provider";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<ReduxProvider>{children}</ReduxProvider>
</body>
</html>
);
}3. Use RTK Query hooks:
"use client";
import { useGetExampleByIdQuery } from "@/redux/services/example/example";
export default function Page() {
const { data, isLoading } = useGetExampleByIdQuery(1);
if (isLoading) return <p>Loading…</p>;
return <pre>{JSON.stringify(data, null, 2)}</pre>;
}What you get
redux/
baseQuery/ # axiosBaseQuery + axios client
services/
rootApi.ts # root API slice
example/ # sample service (copy to add more)
store/store.ts
hooks.ts
Provider.tsx
env.tsAdd your own API
- Copy
redux/services/example/→redux/services/users/ - Edit
users.tsandusers.types.ts - Register in
redux/store/store.ts:
import "../services/users/users";Auth
Requests send Authorization: Bearer <token> when a token cookie is set (see services/rootApi.ts).