This is a library to simplify the work with @tanstack/react-query. It offers unified style for keys in the cache, ability to cancel a request. automatic cache refresh after mutation.
npm install react-query-managerreact-query-manager is a library to simplify the work with @tanstack/react-query. It offers custom query hooks, automatically cleanses the cache after mutations, and provides a unified style for keys in the cache to make data management easier.
react-query-manager solves these problems by providing the following functionality:```
npm install react-query-manager
#### App
`
import React from 'react';
import {
ToastBar, RQWrapper, ToastCustomContent,
ToastCustomUndoContent, toast,
} from 'react-query-manager';
import List from './List';
const CustomContent: ToastCustomContent = (toastProps) => {
return (
{({ icon, message }) => {
return (
<>
{icon}
{message}
style={{
position: 'absolute',
top: 0,
right: 0,
cursor: 'pointer',
}}
viewBox="0 0 24 24"
width="15"
height="15"
onClick={() => {
toast.dismiss(toastProps.id);
}}
>
>
);
}}
);
};
const CustomUndoContent: ToastCustomUndoContent = ({ message, type, onUndo }) => {
const texts = {
'delete-many': 'Cancel delete-many',
'delete-one': 'Cancel delete-one',
'update-many': 'Cancel update-many',
'update-one': 'Cancel update-one',
};
return (
export default function App() {
return (
devToolsOptions={{
buttonPosition: 'bottom-left',
}}
apiUrl="https://jsonplaceholder.typicode.com"
apiAuthorization={() => 'Bearer 12345'}
apiOnSuccess={(...args) => {
console.log('apiOnSuccess: ', args);
}}
apiOnError={(...args) => {
console.log('apiOnError: ', args);
}}
toast={{
globalProps: {
position: 'bottom-center',
},
CustomContent,
CustomUndoContent,
}}
>
);
}
`
#### List
`
import React, { useState } from 'react';
import {
useGetList, useGetOne, useGetInfiniteList,
useUpdateMany, useUpdateOne,
useDeleteMany, useDeleteOne,
} from 'react-query-manager';
const API_POSTS_RESOURCE_PATH = 'posts';
type Post = {
userId: string;
id: string;
title: string;
body: string;
}
export default function List() {
const [selectedPostId, setSelectedPostId] = useState
const queryPosts = useGetList
resource: { path: API_POSTS_RESOURCE_PATH, params: {} },
params: { _page: 1, _limit: 5 },
});
const queryPost = useGetOne
resource: { path: API_POSTS_RESOURCE_PATH, params: {} },
id: selectedPostId,
queryOptions: { enabled: !!selectedPostId },
});
const updatePost = useUpdateOne
resourcePath: API_POSTS_RESOURCE_PATH,
});
const updatePosts = useUpdateMany
resourcePath: API_POSTS_RESOURCE_PATH,
});
const deletePost = useDeleteOne
resourcePath: API_POSTS_RESOURCE_PATH,
});
const deletePosts = useDeleteMany
resourcePath: API_POSTS_RESOURCE_PATH,
});
const infiniteQueryPosts = useGetInfiniteList
resource: { path: API_POSTS_RESOURCE_PATH, params: {} },
pagination: { page: ['_page'], per_page: ['_limit', 10] },
});
return (
type="button"
onClick={() => {
deletePosts.delete({
ids: [1, 2, 3],
resourceParams: {},
});
}}
>
Delete Many
{queryPosts?.data?.data?.map((post) => (
type="button"
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
deletePost.delete({
id: post.id,
resourceParams: {},
});
}}
>
Delete
const form = event.target as HTMLFormElement;
const title = (form.elements[0] as HTMLInputElement).value;
const body = (form.elements[1] as HTMLInputElement).value;
updatePost.update({
resourceParams: {},
id: selectedPostId,
data: { title, body },
});
}}
>
key={queryPost.data?.data.title}
defaultValue={queryPost.data?.data.title}
style={{ width: '100%', padding: '10px', boxSizing: 'border-box' }}
/>
key={queryPost.data?.data.body}
defaultValue={queryPost.data?.data.body}
style={{ width: '100%', padding: '10px', boxSizing: 'border-box' }}
/>
style={{ width: '100%', padding: '10px', boxSizing: 'border-box' }}
type="submit"
>
Update
)}
{infiniteQueryPosts.isLoading ? (
style={{
type="button"
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
deletePost.delete({
id: post.id,
resourceParams: {},
});
}}
>
Delete