Skip to main content

RTK Query Loader

Create loaders for your React components.

🔗 Extendable 💫 Transformable ♻️ ReusableProperly typed

You write your components, as if the data has already loaded.

Install

npm i @ryfylke-react/rtk-query-loader

Example

type Props = {
name: string;
};

// Creating a loader
const loader = createLoader({
queriesArg: (props: Props) => props.name,
useQueries: (name) => ({
queries: {
pokemon: useGetPokemonQuery(name),
},
}),
});

// Consuming the loader
const Pokemon = withLoader((props, { queries }) => {
return (
<article>
<h1>{queries.pokemon.data.name}</h1>
<div>{/* ... */}</div>
</article>
);
}, loader);

Playground