RTK Query Loader 1.0.0

Articles|HÃ¥kon Underbakke | about 2 months ago

I’ve been continuing to work on RTK Query Loader, on the side, since it’s inception 4 months ago. In that time, I’ve fixed some bugs, added some new features and written a proper documentation site.

Interface updates

One thing that I’ve thought about for a while, was rewriting the input/output format for the loaders.

It’s been annoying to have to remember add as const (and have no error message to catch it other than messed up types), and I’m not a big fan of identifying the queries based on their index in the array instead of some property name. It was also limiting, requiring us to have to add a separate argument to make deferred queries work.

Now, you can return deferred queries, queries and also arbitrary data to your loaders:

const loader = createLoader({
   useQueries: () => {
      const charizard = useGetPokemon("charizard");
      const bulbasaur = useGetPokemon("bulbasaur");
      return {
            queries: {
            deferredQueries: {/* ... */},
            payload: { arbitrary: "data" }

As you can see, queries has also been renamed to useQueries to better hint to the fact that it is a hook.

New documentation

Previously, the documentation’s source of truth was the Github README file. This did not scale very well when adding new features and concepts. Now, instead, the documentation is multi-page, built with Docusaurus. Docusaurus has been really, really great. It’s an amazing tool for writing documentation in markdown.

Resolving other libraries

You can now use other data loading libraries with RTK Query Loader, through the use of resolvers. There is an example for Tanstack Query in the docs.

Stateful loaders

You can now have stateful loaders, through the use of payload.