@acrool/react-fetcher

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

https://acrool-react-fetcher-graphql.pages.dev/
https://acrool-react-fetcher-restful.pages.dev/

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

yarn add @acrool/react-fetcher

Quick Start

1. Import styles

Add the following to your entry file (e.g. index.tsx):

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:

import AppFetcherProvider from '@/library/acrool-react-fetcher';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <AppFetcherProvider>
    <App />
  </AppFetcherProvider>
);

3. Create baseApi (GraphQL query)

For Redux Toolkit Query, create baseApi.ts:

import { createGraphQLFetcher } from '@acrool/react-fetcher';
import { createApi } from '@reduxjs/toolkit/query/react';
import { axiosInstance } from '@/library/acrool-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

import { useAuthState } from '@acrool/react-fetcher';

const { getTokens, updateTokens } = useAuthState();

Send GraphQL query

const { data, refetch } = useGetBookmarkQuery({ variables: { bookmarkId: '1' } });

Simulate token invalidation and refresh

const handleMockTokenInvalid = () => {
  updateTokens(curr => ({
    ...curr,
    accessToken: 'mock-invalid-token',
  }));
  refetch();
};

Login/Logout

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 & Imagine