rtk-query-hooked

Easily 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)

Table of Contents

- 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

Installation

npm install rtk-query-hooked

Usage

$3

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

Updated Data: {JSON.stringify(data, null, 2)}

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 { useUpdateSomethingMutation } from './api';
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

Updated Data: {JSON.stringify(data, null, 2)}

- 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`.

License

MIT