@acrool/react-fetcher 0.0.2-alpha.1 → 0.0.2-alpha.10

package/README.md

@@ -1,11 +1,13 @@
 # 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 href="https://acrool-react-fetcher.pages.dev/" title="Acrool React Fetcher - This is a block function for React development loading block">
     <img src="https://raw.githubusercontent.com/acrool/acrool-react-fetcher/main/example/public/og.webp" alt="Acrool React Fetcher Logo"/>
 </a>
 
 <p align="center">
-    This is a toast message function for React development notifications
+    A solution for API integration and token management in React projects
 </p>
 
 <div align="center">
@@ -20,80 +22,108 @@
 </div>
 
 
-`^1.1.0 support react >=18.0.0 <20.0.0`
-
-
-
 ## Features
 
-- Supports queue block list
-- Plug and unplug using `@acrool/react-portal` and `framer-motion`
+- 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
 
-## Install
+## Installation
 
 ```bash
 yarn add @acrool/react-fetcher
 ```
 
+## Quick Start
 
-## Usage
+### 1. Import styles
 
-add in your index.tsx
-```tst
+Add the following to your entry file (e.g. `index.tsx`):
+
+```ts
 import "@acrool/react-fetcher/dist/index.css";
 ```
 
-add in your App.tsx
+### 2. Provider structure
+
+Wrap your app with `AuthStateProvider` and `AxiosClientProvider`. It is recommended to use `AppFetcherProvider` to automatically wrap all necessary providers:
 
 ```tsx
-import {BlockPortal} from "@acrool/react-fetcher";
-
-const App = () => {
-    return (
-        <div>
-            <BaseUsed/>
-            <BlockPortal
-                isVisibleQueueKey={false}
-                loader={<Loader/>}
-                defaultMessage="Loading..."
-            />
-        </div>
-    );
-};
+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`:
+
+```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: () => ({}),
+});
 ```
 
-then in your page
+### 4. Use Auth state and API in your pages
+
+#### Get and update tokens
 
 ```tsx
-import {block} from '@acrool/react-fetcher';
-import {useEffect} from "react";
-
-const Example = () => {
-
-    useEffect(() => {
-        block.show();
-        
-        setTimeout(() => {
-            block.hide();
-        }, 3000)
-    }, []);
-
-    return (
-        <div>
-            sample page
-        </div>
-    );
+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();
 };
 ```
 
-- block.show
-- block.hide
+#### Login/Logout
 
+```tsx
+const login = useLogin();
+const logout = useLogout();
+
+await login({ variables: { input: { account, password } } });
+logout();
+```
 
-There is also a example that you can play with it:
+### 5. More examples
 
-[![Play react-editext-example](https://raw.githubusercontent.com/acrool/acrool-react-fetcher/main/play-in-example-button.svg)](https://acrool-react-fetcher.pages.dev)
+- The Dashboard page demonstrates how to operate token, API, and locale switching
+- The Login page demonstrates login and error handling
 
+---
 
 ## License
 

package/dist/FetcherProvider/FetcherProvider.d.ts

@@ -1,21 +1,26 @@
-import { AxiosInstance, InternalAxiosRequestConfig } from 'axios';
+import { AxiosInstance } from 'axios';
 import { default as React } from 'react';
-import { IResponseFirstError } from './types';
-export declare const AxiosClientContext: React.Context<AxiosInstance>;
-export declare const useAxiosClient: () => AxiosInstance;
+import { IInternalRequestConfig } from '../fetchers/types';
+import { IFormatResponseErrorReturn, TGetResponseFormatError } from './types';
+export declare const AxiosClientContext: React.Context<AxiosInstance | null>;
+export declare const useAxiosClient: () => null;
 interface IProps {
     children: React.ReactNode;
+    axiosInstance: AxiosInstance;
+    checkIsRefreshTokenRequest?: (config: IInternalRequestConfig) => boolean;
+    locale?: string;
+    getResponseFormatError?: TGetResponseFormatError;
+    onError?: (error: IFormatResponseErrorReturn) => void;
+    authorizationPrefix?: string;
     i18nDict?: Record<string, Record<number, string>>;
-    checkIsRefreshTokenRequest?: (config: InternalAxiosRequestConfig) => boolean;
-    getLocale: () => string;
-    onError?: (error: IResponseFirstError) => void;
+    isDebug?: boolean;
 }
 /**
  * Axios Client 提供者
  * @param children
  * @param authTokensManager
- * @param getLocale
+ * @param locale
  * @param onError
  */
-declare const FetcherProvider: ({ children, getLocale, onError, i18nDict, checkIsRefreshTokenRequest, }: IProps) => import("react/jsx-runtime").JSX.Element;
+declare const FetcherProvider: ({ children, axiosInstance, locale, getResponseFormatError, onError, checkIsRefreshTokenRequest, authorizationPrefix, i18nDict, isDebug, }: IProps) => import("react/jsx-runtime").JSX.Element;
 export default FetcherProvider;

package/dist/FetcherProvider/index.d.ts

@@ -1,2 +1,3 @@
 export { default as FetcherProvider } from './FetcherProvider';
-export type { IResponseFirstError } from './types';
+export { getGraphQLResponseFormatError, getRestFulResponseFormatError } from './utils';
+export type { TGetResponseFormatError } from './types';

package/dist/FetcherProvider/types.d.ts

@@ -2,9 +2,10 @@ import { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
 export type TInterceptorRequest = (value: InternalAxiosRequestConfig<any>) => InternalAxiosRequestConfig<any> | Promise<InternalAxiosRequestConfig<any>>;
 export type TInterceptorResponseSuccess = (value: AxiosResponse<any>) => AxiosResponse<any> | Promise<AxiosResponse<any>>;
 export type TInterceptorResponseError = (error: AxiosError<any>) => AxiosResponse<any> | Promise<AxiosResponse<any>>;
-export interface IResponseFirstError {
+export interface IFormatResponseErrorReturn {
     message: string;
     code: string;
     path?: string;
     args?: any;
 }
+export type TGetResponseFormatError = (response?: AxiosResponse) => IFormatResponseErrorReturn;

package/dist/FetcherProvider/utils.d.ts

@@ -1,7 +1,12 @@
-import { AxiosResponse } from 'axios';
-import { IResponseFirstError } from './types';
+import { TGetResponseFormatError } from './types';
 /**
- * 返回 Axios 格式錯誤
+ * 返回 Axios 格式錯誤 With GraphQL
+ * 針對 GraphQL多錯誤格式
  * @param response
  */
-export declare const getResponseFirstError: (response?: AxiosResponse) => IResponseFirstError;
+export declare const getGraphQLResponseFormatError: TGetResponseFormatError;
+/**
+ * 返回 Axios 格式錯誤 with RestFul
+ * @param response
+ */
+export declare const getRestFulResponseFormatError: TGetResponseFormatError;