SebasPtsch•12mo ago

Get Query Key on Server

I'm following some recommended practices from one of the react query maintainers @tkdodo and want to invalidate queries from the server in a type-safe way. As a result of this I want to be able to get the query keys for queries on the server to properly invalidate them using a trpc subscription. Is there a clean way to feed the router definition into getQueryKey? At the moment what I'm doing is:

/**
 * The main router for the backend, contains all other routers
 */
const appRouter = t.router({
  invalidator: publicProcedure.subscription(() => {
    return observable<TRPCQueryKey>((emit) => {
      ee.on("invalidate", (key) => {
        emit.next(key);
      });

      return () => {
        ee.off("invalidate");
      };
    });
  }),
});

export type AppRouter = typeof appRouter;

const rtrpc = createTRPCReact<AppRouter>();

const qk = getQueryKey(rtrpc.thing.getThing, "1"); // use this along with an eventemitter to invalidate queries on the client

/**
 * The main router for the backend, contains all other routers
 */
const appRouter = t.router({
  invalidator: publicProcedure.subscription(() => {
    return observable<TRPCQueryKey>((emit) => {
      ee.on("invalidate", (key) => {
        emit.next(key);
      });

      return () => {
        ee.off("invalidate");
      };
    });
  }),
});

export type AppRouter = typeof appRouter;

const rtrpc = createTRPCReact<AppRouter>();

const qk = getQueryKey(rtrpc.thing.getThing, "1"); // use this along with an eventemitter to invalidate queries on the client

This is not in the react context and I don't really want to import react in order to get the query key

Solution:

I wouldn’t couple the backend into the frontend state management by trying to dispatch the query key. Instead dispatch a message relevant to your business logic, and on the frontend turn that into a query key for invalidation and optimistic updates, you’ll have a better time

Jump to solution

8 Replies

SebasPtschOP•12mo ago

~~It looks like I may be able to derive it using callers?~~

Nick•12mo ago

Where did he recommend this? I think this is pretty far from a good practice. Use the onSuccess callback on the client

SebasPtschOP•12mo ago

https://tkdodo.eu/blog/using-web-sockets-with-react-query

SebasPtschOP•12mo ago

specifically, https://tkdodo.eu/blog/using-web-sockets-with-react-query

Using WebSockets with React Query

A step-by-step guide on how to make real-time notifications work with react-query

Nick•12mo ago

Oh thanks, I see better what you’re trying to achieve now

Solution

Nick•12mo ago

So dispatch the entity type and id, or just the whole entity, or a general message to invalidate a bunch of stuff

SebasPtschOP•12mo ago

Yeah, the primary issue is that I don't actually want to handle partial updates (with data) as you can't really protect trpc websocket connections with session. I could theoretically publish events per type e.g. invalidateEvent, eventId The react work around does work at the moment. I'll do some more testing but because my frontend state is so closely tied to my backend state through trpc-react I'm trying to keep it that way, extremely type safe