A small library inspired by TkDodo's blog: "Effective React Query Keys" and "The Query Options API".

[MlNl-PEKKA]

Hey everyone! 👋

I'm currently building a library inspired by TkDodo's awesome blog posts, Effective React Query Keys and The Query Options API.

I loved his approach to organizing queryKeys into a query-ke- factory, so I decided to take the idea a step further. I'm building a query/mutation options factory, that:

• Automatically builds queryKeys and mutationKeys based on the structure of the factory.
• Is fully type-safe leveraging the queryOptions API.

Here's the factory-code:

import { QueryStuff } from "query-stuff";

const q = new QueryStuff();

export const keyFactory = q.factory((q) => ({
  lists: q.module((q) => ({
    list: q.input<{ id: number }>().module((q) => ({
      read: q.query(({ id }) => ({ name: `List ${id}` })),
      update: q
        .input<{ meta: Record<string, unknown> }>()
        .mutation(({ id: _, meta: __ }) => ({ status: "success" })),
    })),
  })),
  details: q.module((q) => ({
    detail: q.input<{ id: number }>().module((q) => ({
      read: q.query(({ id }) => ({ name: `Detail ${id}` })),
    })),
    count: q
      .input<{ filters: Record<string, unknown> }>()
      .query(({ filters: _ }) => ({
        count: 10,
      })),
  })),
}));

Here's the usage with type-suggestions of the above factory:

Thank you so much for taking the time to read this! This is my first time building a library, and I’d love any feedback or advice from the React Query community. 🙏