React Query Shared Hooks Data Fetching Library
This library provides a set of hooks for data fetching using React Query. It is designed to be easily integrated into React applications, allowing for efficient data retrieval and caching mechanisms.
Installation
Before you can use the hooks, you must add this library to your project:
npm install @danmatlam/store
## Setup query client provider
```js
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const queryClient = new QueryClient();
function MyApp({ Component, pageProps }) {
return (
<QueryClientProvider client={queryClient}>
<Component {...pageProps} />
</QueryClientProvider>
);
}
export default MyApp;
Use the hooks
import { useGetPokemon } from '@yourusername/pokemon-data-fetching-library';
function PokemonComponent() {
const { data, isLoading, error } = useGetPokemon({ pokemon: 'charmander' });
if (isLoading) return <div>Loading...</div>;
if (error) return <div>An error occurred: {error.message}</div>;
return (
<div>
<h1>{data.name}</h1>
<img src={data.sprites.front_default} alt={data.name} />
</div>
);
}