feat: react-query-utils (#257)

Author: alex-mcgovern

src/hooks/useSse.ts

@@ -1,11 +1,11 @@
 import { useEffect } from "react";
 import { useLocation } from "react-router-dom";
-import { Query, useQueryClient } from "@tanstack/react-query";
-import { OpenApiTsReactQueryKey } from "@/types/openapi-ts";
+import { useQueryClient } from "@tanstack/react-query";
 import {
   v1GetWorkspaceAlertsQueryKey,
   v1GetWorkspaceMessagesQueryKey,
 } from "@/api/generated/@tanstack/react-query.gen";
+import { invalidateQueries } from "@/lib/react-query-utils";
 
 const BASE_URL = import.meta.env.VITE_BASE_API_URL;
 
@@ -20,20 +20,10 @@ export function useSse() {
 
     eventSource.onmessage = function (event) {
       if (event.data.toLowerCase().includes("new alert detected")) {
-        queryClient.invalidateQueries({
-          refetchType: "all",
-          predicate: (
-            query: Query<unknown, Error, unknown, OpenApiTsReactQueryKey>,
-          ) =>
-            query.queryKey[0]._id ===
-              v1GetWorkspaceAlertsQueryKey({
-                path: { workspace_name: "default" }, // NOTE: Just supplying "default" to satisfy the type-checker, because we are just using the `_id`, this invalidates for any workspace
-              })[0]?._id ||
-            query.queryKey[0]._id ===
-              v1GetWorkspaceMessagesQueryKey({
-                path: { workspace_name: "default" }, // NOTE: Just supplying "default" to satisfy the type-checker, because we are just using the `_id`, this invalidates for any workspace
-              })[0]?._id,
-        });
+        invalidateQueries(queryClient, [
+          v1GetWorkspaceAlertsQueryKey,
+          v1GetWorkspaceMessagesQueryKey,
+        ]);
       }
     };
 

src/lib/react-query-utils.ts

@@ -0,0 +1,44 @@
+import { OpenApiTsReactQueryKey } from "@/types/openapi-ts";
+import { OptionsLegacyParser } from "@hey-api/client-fetch";
+import { Query, QueryClient } from "@tanstack/react-query";
+
+// NOTE: This is copy/pasted from @/api/generated/@tanstack/react-query.gen
+type QueryKey<TOptions extends OptionsLegacyParser = OptionsLegacyParser> = [
+  Pick<TOptions, "baseUrl" | "body" | "headers" | "path" | "query"> & {
+    _id: string;
+    _infinite?: boolean;
+  },
+];
+
+// A generic type that describes the possible permutations of openapi-ts
+// react-query queryKey functions. The use of `any` is required to make it
+// generic enough for use with any openapi-ts queryKey fn. The return type
+// constraint is sufficiently strict that it is still safe to use.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type QueryKeyFn = (options: any) => QueryKey[0][];
+
+// NOTE: The type constraints on `queryKeyFn` are sufficiently strict that we
+// can use type assertion for the return type with relative safety.
+const getQueryKeyFnId = <T extends OptionsLegacyParser>(
+  queryKeyFn: QueryKeyFn,
+) => queryKeyFn({} as T)[0]?._id as string;
+
+/**
+ * Takes a queryClient, and an array of queryKeyFns, and invalidates all queries
+ * in the cache with matching query keys.
+ */
+export function invalidateQueries(
+  queryClient: QueryClient,
+  queryKeyFns: QueryKeyFn[],
+) {
+  return queryClient.invalidateQueries({
+    refetchType: "all",
+    predicate: (
+      query: Query<unknown, Error, unknown, OpenApiTsReactQueryKey>,
+    ) => {
+      return queryKeyFns.some(
+        (fn) => query.queryKey[0]._id === getQueryKeyFnId(fn),
+      );
+    },
+  });
+}