Wrapper library for Redux Toolkit Query with useful hooks and types.
npm install rtk-query-hookedEasily reactable, fully typed.
rtk-query-hooked is a utility library for simplifying the use of RTK Query hooks by providing you with a tiny layer of abstracion for query/mutation events and types.
Passed events do not need to be memoized as they are always fresh internally, forget about useCallback and useEffect problems when reacting to a query/mutation state, handlers for events can be passed without dependency worries, making the API similar to tanstack/react-query.
Be able to easily infer data that an RTK Query hook returns with UseQueryData and UseMutationData types. (Can be difficult to achieve otherwise)
- rtk-query-hooked
- Installation
- Usage
- useQuery
- Import
- Usage Example
- useMutation
- Import
- Usage Example
- API
- useQuery
- Props
- Returns
- useMutation
- Props
- Returns
- Types
- UseQueryProps
- UseMutationProps
- RTKQueryHook
- RTKMutationHook
- UseQueryData
- UseMutationData
- RTKHookedEvents
- License
npm install rtk-query-hooked
The useQuery hook is a wrapper around the RTK Query hook that provides additional event handlers and simplifies the usage.
#### Import
import { useQuery } from 'rtk-query-hooked';
#### Usage Example
``
import { useQuery } from 'rtk-query-hooked';
import { useGetSomethingQuery } from './api';
import { toast } from './toast';
const MyComponent = () => {
const { data, error, isLoading } = useQuery({
hook: useGetSomethingQuery,
request: { id: 1 },
onSuccess: (data) => toast.success('Fetched ' + data.name + ' successfully.'),
onError: (error) => toast.error('Error fetching data: ', error.message),
});
if (isLoading) return
return data ?
Updated Data: {JSON.stringify(data, null, 2)} : null$3
The
useMutation hook is a wrapper around the RTK Query mutation hook that provides additional event handlers and simplifies the usage.#### Import
`import { useMutation } from 'rtk-query-hooked';`#### Usage Example
`
import { useMutation } from 'rtk-query-hooked';
import { toast } from './toast';const MyComponent = () => {
const [trigger, { data, error, isLoading }] = useMutation({
hook: useUpdateSomethingMutation,
onSuccess: (data) => toast.success('Updated ' + data.name + ' successfully.'),
onError: (error) => toast.error('Error fetching data: ', error.message),
});
const handleUpdate = () => {
trigger({ id: 1, value: 'newValue' });
};
if (isLoading) return
return (
Updated Data: {JSON.stringify(data, null, 2)}} : nullAPI
$3
#### Props
-
hook: The RTK Query hook to be used.
- request: The request parameters for the query.
- options: (Optional) Additional options for the query.
- onSettled: (Optional) Callback when the query is settled.
- onSuccess: (Optional) Callback when the query is successful.
- onError: (Optional) Callback when the query fails.#### Returns
The same response object returned by the RTK Query hook.
$3
#### Props
-
hook: The RTK Query mutation hook to be used.
- onSettled: (Optional) Callback when the mutation is settled.
- onSuccess: (Optional) Callback when the mutation is successful.
- onError: (Optional) Callback when the mutation fails.#### Returns
An array containing the trigger function and the response object from the RTK Query mutation hook.
Types
$3
`
type UseQueryProps = {
hook: RTKQueryHook;
request:
| Parameters>[0]
| (() => Parameters>[0]);
options?:
| Parameters>[1]
| (() => Parameters>[1]);
} & RTKHookedEvents>;
`$3
`
type UseMutationProps = {
hook: RTKMutationHook;
} & RTKHookedEvents>;
`$3
A type for the
useQuery hook from RTK Query with generics and advanced typing.$3
A type for the
useMutation hook from RTK Query with generics and advanced typing.$3
The data returned by the
useQuery hook.$3
The data returned by the
useMutation hook.$3
A type for event handlers:
onSettled, onSuccess, and onError`.