codestacks React Fetcher

codestacks 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

- 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

``bash
yarn add @codestacks/react-fetcher
`

Quick Start

$3

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

`ts
import "@codestacks/react-fetcher/dist/index.css";
`

$3

Wrap your app with AuthStateProvider and AxiosClientProvider. It is recommended to use AppFetcherProvider to automatically wrap all necessary providers:

`tsx
import AppFetcherProvider from '@/library/codestacks-react-fetcher';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(



);
`

$3

For Redux Toolkit Query, create baseApi.ts:

`ts
import { createGraphQLFetcher } from '@codestacks/react-fetcher';
import { createApi } from '@reduxjs/toolkit/query/react';
import { axiosInstance } from '@/library/codestacks-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: () => ({}),
});
`

$3

#### Get and update tokens

`tsx
import { useAuthState } from '@codestacks/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();
``

$3

- The Dashboard page demonstrates how to operate token, API, and locale switching
- The Login page demonstrates login and error handling

---

License

MIT © codestacks