@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

• GraphQL
• RestFul

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/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/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

Options queryString

(.net not support) default: ?statusIds[]=1&statusIds[]=2

change to: ?statusIds=1&statusIds=2

export const baseQueryWithAxios: BaseQueryFn<IQuery> = async (query, BaseQueryApi, extraOptions) => {
    await mutex.waitForUnlock();
    try {
        const {url, method, fetchOptions, ...args} = query;
        const data = await createRestFulFetcher(axiosInstance, {url, method}, getContentTypeWithMethod)({
            ...args,
            fetchOptions: {
                ...fetchOptions,
                paramsSerializer: (params) => {
                    return qs.stringify(params, {indices: false});
                }
            }
        });

        return {
            data,
            meta: {}
        };

    } catch (error: any) {
        dialog.error(error.message, {code: error.code});

        return {
            error: {
                code: error.code || 500,
                message: error.message
            },
        };
    }
};

License

MIT © Acrool & Imagine