https://github.com/acrool/acrool-react-fetcher
Axios fetcher provider (react-query, rtk-query), token refresh by Reactjs
https://github.com/acrool/acrool-react-fetcher
auth-refreshtoken axios graphql reactjs restful
Last synced: 10 months ago
JSON representation
Axios fetcher provider (react-query, rtk-query), token refresh by Reactjs
- Host: GitHub
- URL: https://github.com/acrool/acrool-react-fetcher
- Owner: acrool
- License: mit
- Created: 2024-09-13T13:15:22.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-06T03:26:11.000Z (11 months ago)
- Last Synced: 2025-07-06T03:32:58.356Z (11 months ago)
- Topics: auth-refreshtoken, axios, graphql, reactjs, restful
- Language: TypeScript
- Homepage: https://acrool-react-fetcher-graphql.pages.dev/
- Size: 1.06 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-react - Acrool React Fetcher - React Hook (Restful API + Axios + ReactQuery) refer to Graphql (API Utils)
README
# Acrool React Fetcher
Acrool React Fetcher is a solution for API integration and Auth state management in React projects. It helps you easily manage tokens, make API requests, perform GraphQL queries, and handle authentication flows.
A solution for API integration and token management in React projects
- [GraphQL](https://acrool-react-fetcher-graphql.pages.dev/)
- [RestFul](https://acrool-react-fetcher-restful.pages.dev/)
[](https://www.npmjs.com/package/@acrool/react-fetcher)
[](https://github.com/acrool/@acrool/react-fetcher/blob/main/LICENSE)
[](https://github.com/acrool/react-fetcher/blob/main/LICENSE)
[](https://www.npmjs.com/package/@acrool/react-fetcher)
[](https://www.npmjs.com/package/@acrool/react-fetcher)
## Features
- Token state management and custom refresh mechanism
- GraphQL query support and custom fetcher
- Seamless integration with Redux Toolkit Query
- Flexible provider composition
- Easy to test and simulate login/logout/token invalidation scenarios
## Installation
```bash
yarn add @acrool/react-fetcher
```
## Quick Start
### 1. Import styles
Add the following to your entry file (e.g. `index.tsx`):
```ts
import "@acrool/react-fetcher/dist/index.css";
```
### 2. Provider structure
Wrap your app with `AuthStateProvider` and `AxiosClientProvider`. It is recommended to use `AppFetcherProvider` to automatically wrap all necessary providers:
```tsx
import AppFetcherProvider from '@/library/react-fetcher';
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
);
```
### 3. Create baseApi (GraphQL query)
For Redux Toolkit Query, create `baseApi.ts`:
```ts
import { createGraphQLFetcher } from '@acrool/react-fetcher';
import { createApi } from '@reduxjs/toolkit/query/react';
import { axiosInstance } from '@/library/react-fetcher';
export const baseApi = createApi({
reducerPath: 'api',
baseQuery: async (query, api, extraOptions) => {
// Token handling and refresh are managed automatically
const data = await createGraphQLFetcher(axiosInstance, query.document)(query.args);
return { data };
},
endpoints: () => ({}),
});
```
### 4. Use Auth state and API in your pages
#### Get and update tokens
```tsx
import { useAuthState } from '@acrool/react-fetcher';
const { getTokens, updateTokens } = useAuthState();
```
#### Send GraphQL query
```tsx
const { data, refetch } = useGetBookmarkQuery({ variables: { bookmarkId: '1' } });
```
#### Simulate token invalidation and refresh
```tsx
const handleMockTokenInvalid = () => {
updateTokens(curr => ({
...curr,
accessToken: 'mock-invalid-token',
}));
refetch();
};
```
#### Login/Logout
```tsx
const login = useLogin();
const logout = useLogout();
await login({ variables: { input: { account, password } } });
logout();
```
### 5. More examples
- The Dashboard page demonstrates how to operate token, API, and locale switching
- The Login page demonstrates login and error handling
---
## License
MIT © [Acrool](https://github.com/acrool) & [Imagine](https://github.com/imagine10255)