@bonny-kato/remix-client-cache
Advanced tools
remix-client-cache is a powerful and lightweight library specifically designed for use
with Remix.run. It provides an easy way to cache your server loader data on the client side.
This library is inspired by the remix-client-cache package. However, we wanted to provide features that the original package lacked, such as in-background data fetching under various states such as reconnect or window-focus, as well as better cache management.
npm i @bonny-kato/remix-client-cache
or
yarn add remix-client-cache
After installation, you can import and use our module in your Remix.run project. Ensure your project setup meets the prerequisites before starting to use our library.
// root.tsx
import { CacheProvider } from "@bonny-kato/remix-client-cache";
export function Layout({ children }: { children: React.ReactNode }) {
return (
// ...
<body>
{/* wrapp the app with CacheProvider */}
<CacheProvider>{children}</CacheProvider>
<ScrollRestoration />
<Scripts />
</body>
// ...
);
}
// users.ts
import { cacheClientLoader, useCachedLoaderData, } from "@bonny-kato/remix-client-cache";
export const loader = async () => {
const users = getUsers()
return defer({ users })
}
export const clientLoader = (args: ClientLoaderFunctionArgs) => cacheClientLoader(args);
clientLoader.hydrate = true;
const Users = () => {
const {
data: users,
isFetching,
isLoading,
error
} = useCachedLoaderData<{ users: User[] }>();
return (
<div>
{error && "an error occured"}
{isLoading ? "is loading" : <>
{users?.users?.map((user) => <p>{user.name}</p>)}
<hr />
{isFetching && "is fetching"}
</>}
</div>
);
};
export default Users;
CacheProvider is a React function component that manages cache cleanup operations. You should wrap your entire application with this component. It accepts two props;
100000ms) will be used.Utility function use alongside with clientLoader to cache server loader data
Customer hook to access cached data and invalidate cached data in different states like on on mount, reconnect and on window focus
If you like the project, please consider supporting us by giving a âď¸ on GitHub.
MIT
If you find a bug, please file an issue on our issue tracker on GitHub
Thank you for considering contributing to remix-client-cache! We welcome any contributions, big or small, including bug reports, feature requests, documentation improvements, or code changes.
To get started, please fork this repository and make your changes in a new branch. Once you're ready to submit your changes, please open a pull request with a clear description of your changes and any related issues or pull requests.
Please note that all contributions are subject to our Code of Conduct. By participating, you are expected to uphold this code.
We appreciate your time and effort in contributing to remix-client-cache and helping to make it a better tool for the community!
FAQs
Utility library to cache your client data in Remix.run
We found that @bonny-kato/remix-client-cache demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
React disclosed a CVSS 10.0 RCE in React Server Components and is advising users to upgrade affected packages and frameworks to patched versions now.
Research
/Security News
We spotted a wave of auto-generated âelf-*â npm packages published every two minutes from new accounts, with simple malware variants and early takedowns underway.
Security News
TypeScript 6.0 will be the last JavaScript-based major release, as the project shifts to the TypeScript 7 native toolchain with major build speedups.