Getting tRPC-style organisation with plain React Query

[em2724]

Getting tRPC-style organisation with plain React Query

Hi everyone

One of the things I envy about tRPC projects is the organisational clarity you get for free:

trpc.posts.list.useQuery()
trpc.posts.detail.useQuery({ id })
trpc.posts.create.useMutation()

Everything is namespaced, grouped, and discoverable. There's no query key management problem because keys are derived from the router structure. You know exactly where to look for anything posts-related.

I want that same organisational DX on a project that doesn't use tRPC. No extra backend setup, just React Query on the client.

---

What I've been experimenting with

Since queryOptions already encapsulates the query key, you can use a plain namespace object as both the key factory and the options factory:

// posts.queries.ts
export const postQueries = {
  list: () => queryOptions({
    queryKey: ['posts'],
    queryFn: fetchPosts,
  }),
  detail: (id: string) => queryOptions({
    queryKey: ['posts', id],
    queryFn: () => fetchPost(id),
  }),
}

What I'm hoping to learn

• Is there an existing library that solves this well? (The most well-known option, @lukemorales/query-key-factory, is no longer maintained.)
• Has anyone built a custom implementation of this pattern, and if so, how did you structure it?
• Is this even a recommended direction to go in, or is there a more idiomatic React Query approach the maintainers would point to instead?

Thanks!

[TkDodo]

zodios used to do this pretty well, not sure what the status is though

https://www.zodios.org/