Add mutationKey everywhere

package-lock.json

@@ -55,7 +55,7 @@
       },
       "devDependencies": {
         "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
-        "@tanstack/react-query-devtools": "^5.35.5",
+        "@tanstack/react-query-devtools": "^5.45.1",
         "@tauri-apps/cli": ">=2.0.0-beta.0",
         "@types/node": "^18.7.10",
         "@types/papaparse": "^5.3.7",
@@ -2290,10 +2290,19 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.45.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.45.0.tgz",
+      "integrity": "sha512-RVfIZQmFUTdjhSAAblvueimfngYyfN6HlwaJUPK71PKd7yi43Vs1S/rdimmZedPWX/WGppcq/U1HOj7O7FwYxw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tanstack/query-devtools": {
-      "version": "5.32.1",
+      "version": "5.37.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.32.1.tgz",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.37.1.tgz",
-      "integrity": "sha512-7Xq57Ctopiy/4atpb0uNY5VRuCqRS/1fi/WBCKKX6jHMa6cCgDuV/AQuiwRXcKARbq2OkVAOrW2v4xK9nTbcCA==",
+      "integrity": "sha512-XcG4IIHIv0YQKrexTqo2zogQWR1Sz672tX2KsfE9kzB+9zhx44vRKH5si4WDILE1PIWQpStFs/NnrDQrBAUQpg==",
       "dev": true,
       "funding": {
         "type": "github",
@@ -2301,11 +2310,11 @@
       }
     },
     "node_modules/@tanstack/react-query": {
-      "version": "5.35.5",
+      "version": "5.45.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.35.5.tgz",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.45.1.tgz",
-      "integrity": "sha512-sppX7L+PVn5GBV3In6zzj0zcKfnZRKhXbX1MfIfKo1OjIq2GMaopvAFOP0x1bRYTUk2ikrdYcQYOozX7PWkb8A==",
+      "integrity": "sha512-mYYfJujKg2kxmkRRjA6nn4YKG3ITsKuH22f1kteJ5IuVQqgKUgbaSQfYwVP0gBS05mhwxO03HVpD0t7BMN7WOA==",
       "dependencies": {
-        "@tanstack/query-core": "5.35.5"
+        "@tanstack/query-core": "5.45.0"
       },
       "funding": {
         "type": "github",
@@ -2316,29 +2325,20 @@
       }
     },
     "node_modules/@tanstack/react-query-devtools": {
-      "version": "5.35.5",
+      "version": "5.45.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.35.5.tgz",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.45.1.tgz",
-      "integrity": "sha512-4Xll14B9uhgEJ+uqZZ5tqZ7G1LDR7wGYgb+NOZHGn11TTABnlV8GWon7zDMqdaHeR5mjjuY1UFo9pbz39kuZKQ==",
+      "integrity": "sha512-4mrbk1g5jqlqh0pifZNsKzy7FtgeqgwzMICL4d6IJGayrrcrKq9K4N/OzRNbgRWrTn6YTY63qcAcKo+NJU2QMw==",
       "dev": true,
       "dependencies": {
-        "@tanstack/query-devtools": "5.32.1"
+        "@tanstack/query-devtools": "5.37.1"
       },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       },
       "peerDependencies": {
-        "@tanstack/react-query": "^5.35.5",
+        "@tanstack/react-query": "^5.45.1",
-        "react": "^18.0.0"
+        "react": "^18 || ^19"
-      }
-    },
-    "node_modules/@tanstack/react-query/node_modules/@tanstack/query-core": {
-      "version": "5.35.5",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.35.5.tgz",
-      "integrity": "sha512-OMWvlEqG01RfGj+XZb/piDzPp0eZkkHWSDHt2LvE/fd1zWburP/xwm0ghk6Iv8cuPlP+ACFkZviKXK0OVt6lhg==",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
     "node_modules/@tauri-apps/api": {

package.json

@@ -76,7 +76,7 @@
   },
   "devDependencies": {
     "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
-    "@tanstack/react-query-devtools": "^5.35.5",
+    "@tanstack/react-query-devtools": "^5.45.1",
     "@tauri-apps/cli": ">=2.0.0-beta.0",
     "@types/node": "^18.7.10",
     "@types/papaparse": "^5.3.7",

src-web/components/App.tsx

@@ -20,7 +20,7 @@ const queryClient = new QueryClient({
 export function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      <ReactQueryDevtools initialIsOpen={false} />
+      <ReactQueryDevtools buttonPosition="bottom-left" />
       <MotionConfig transition={{ duration: 0.1 }}>
         <HelmetProvider>
           <DndProvider backend={HTML5Backend}>

src-web/hooks/useCancelHttpResponse.ts

@@ -4,6 +4,7 @@ import { trackEvent } from '../lib/analytics';
 
 export function useCancelHttpResponse(id: string | null) {
   return useMutation<void>({
+    mutationKey: ['cancel_http_response', id],
     mutationFn: () => event.emit(`cancel_http_response_${id}`),
     onSettled: () => trackEvent('http_response', 'cancel'),
   });

src-web/hooks/useCheckForUpdates.tsx

@@ -9,6 +9,7 @@ export function useCheckForUpdates() {
   const alert = useAlert();
   const appInfo = useAppInfo();
   return useMutation({
+    mutationKey: ['check_for_updates'],
     mutationFn: async () => {
       const hasUpdate: boolean = await minPromiseMillis(invokeCmd('cmd_check_for_updates'), 500);
       if (!hasUpdate) {

src-web/hooks/useCreateCookieJar.ts

@@ -12,6 +12,7 @@ export function useCreateCookieJar() {
   const prompt = usePrompt();
 
   return useMutation<CookieJar>({
+    mutationKey: ['create_cookie_jar'],
     mutationFn: async () => {
       if (workspaceId === null) {
         throw new Error("Cannot create cookie jar when there's no active workspace");

src-web/hooks/useCreateEnvironment.ts

@@ -14,6 +14,7 @@ export function useCreateEnvironment() {
   const queryClient = useQueryClient();
 
   return useMutation<Environment, unknown, void>({
+    mutationKey: ['create_environment'],
     mutationFn: async () => {
       const name = await prompt({
         id: 'new-environment',

src-web/hooks/useCreateFolder.ts

@@ -14,6 +14,7 @@ export function useCreateFolder() {
   const prompt = usePrompt();
 
   return useMutation<Folder, unknown, Partial<Pick<Folder, 'name' | 'sortPriority' | 'folderId'>>>({
+    mutationKey: ['create_folder'],
     mutationFn: async (patch) => {
       if (workspaceId === null) {
         throw new Error("Cannot create folder when there's no active workspace");

src-web/hooks/useCreateGrpcRequest.ts

@@ -18,6 +18,7 @@ export function useCreateGrpcRequest() {
     unknown,
     Partial<Pick<GrpcRequest, 'name' | 'sortPriority' | 'folderId'>>
   >({
+    mutationKey: ['create_grpc_request'],
     mutationFn: (patch) => {
       if (workspaceId === null) {
         throw new Error("Cannot create grpc request when there's no active workspace");

src-web/hooks/useCreateHttpRequest.ts

@@ -14,6 +14,7 @@ export function useCreateHttpRequest() {
   const routes = useAppRoutes();
 
   return useMutation<HttpRequest, unknown, Partial<HttpRequest>>({
+    mutationKey: ['create_http_request'],
     mutationFn: (patch = {}) => {
       if (workspaceId === null) {
         throw new Error("Cannot create request when there's no active workspace");

src-web/hooks/useCreateWorkspace.ts

@@ -8,6 +8,7 @@ export function useCreateWorkspace() {
   const routes = useAppRoutes();
   const prompt = usePrompt();
   return useMutation<Workspace, void, void>({
+    mutationKey: ['create_workspace'],
     mutationFn: async () => {
       const name = await prompt({
         id: 'new-workspace',

src-web/hooks/useDeleteAnyGrpcRequest.tsx

@@ -13,6 +13,7 @@ export function useDeleteAnyGrpcRequest() {
   const confirm = useConfirm();
 
   return useMutation<GrpcRequest | null, string, string>({
+    mutationKey: ['delete_any_grpc_request'],
     mutationFn: async (id) => {
       const request = await getGrpcRequest(id);
       if (request == null) return null;

src-web/hooks/useDeleteAnyHttpRequest.tsx

@@ -14,6 +14,7 @@ export function useDeleteAnyHttpRequest() {
   const confirm = useConfirm();
 
   return useMutation<HttpRequest | null, string, string>({
+    mutationKey: ['delete_any_http_request'],
     mutationFn: async (id) => {
       const request = await getHttpRequest(id);
       if (request == null) return null;

src-web/hooks/useDeleteCookieJar.tsx

@@ -11,6 +11,7 @@ export function useDeleteCookieJar(cookieJar: CookieJar | null) {
   const confirm = useConfirm();
 
   return useMutation<CookieJar | null, string>({
+    mutationKey: ['delete_cookie_jar', cookieJar?.id],
     mutationFn: async () => {
       const confirmed = await confirm({
         id: 'delete-cookie-jar',

src-web/hooks/useDeleteEnvironment.tsx

@@ -11,6 +11,7 @@ export function useDeleteEnvironment(environment: Environment | null) {
   const confirm = useConfirm();
 
   return useMutation<Environment | null, string>({
+    mutationKey: ['delete_environment', environment?.id],
     mutationFn: async () => {
       const confirmed = await confirm({
         id: 'delete-environment',

src-web/hooks/useDeleteFolder.tsx

@@ -13,6 +13,7 @@ export function useDeleteFolder(id: string | null) {
   const confirm = useConfirm();
 
   return useMutation<Folder | null, string>({
+    mutationKey: ['delete_folder', id],
     mutationFn: async () => {
       const folder = await getFolder(id);
       const confirmed = await confirm({

src-web/hooks/useDeleteGrpcConnection.ts

@@ -7,6 +7,7 @@ import { grpcConnectionsQueryKey } from './useGrpcConnections';
 export function useDeleteGrpcConnection(id: string | null) {
   const queryClient = useQueryClient();
   return useMutation<GrpcConnection>({
+    mutationKey: ['delete_grpc_connection', id],
     mutationFn: async () => {
       return await invokeCmd('cmd_delete_grpc_connection', { id: id });
     },

src-web/hooks/useDeleteGrpcConnections.ts

@@ -6,6 +6,7 @@ import { grpcConnectionsQueryKey } from './useGrpcConnections';
 export function useDeleteGrpcConnections(requestId?: string) {
   const queryClient = useQueryClient();
   return useMutation({
+    mutationKey: ['delete_grpc_connections', requestId],
     mutationFn: async () => {
       if (requestId === undefined) return;
       await invokeCmd('cmd_delete_all_grpc_connections', { requestId });

src-web/hooks/useDeleteHttpResponse.ts

@@ -7,6 +7,7 @@ import { httpResponsesQueryKey } from './useHttpResponses';
 export function useDeleteHttpResponse(id: string | null) {
   const queryClient = useQueryClient();
   return useMutation<HttpResponse>({
+    mutationKey: ['delete_http_response', id],
     mutationFn: async () => {
       return await invokeCmd('cmd_delete_http_response', { id: id });
     },

src-web/hooks/useDeleteHttpResponses.ts

@@ -6,6 +6,7 @@ import { httpResponsesQueryKey } from './useHttpResponses';
 export function useDeleteHttpResponses(requestId?: string) {
   const queryClient = useQueryClient();
   return useMutation({
+    mutationKey: ['delete_http_responses', requestId],
     mutationFn: async () => {
       if (requestId === undefined) return;
       await invokeCmd('cmd_delete_all_http_responses', { requestId });

src-web/hooks/useDeleteRequest.tsx

@@ -7,6 +7,7 @@ export function useDeleteRequest(id: string | null) {
   const deleteAnyGrpcRequest = useDeleteAnyGrpcRequest();
 
   return useMutation<void, string>({
+    mutationKey: ['delete_request', id],
     mutationFn: async () => {
       if (id == null) return;
       // We don't know what type it is based on the ID, so just try deleting both

src-web/hooks/useDeleteWorkspace.tsx

@@ -16,6 +16,7 @@ export function useDeleteWorkspace(workspace: Workspace | null) {
   const confirm = useConfirm();
 
   return useMutation<Workspace | null, string>({
+    mutationKey: ['delete_workspace', workspace?.id],
     mutationFn: async () => {
       const confirmed = await confirm({
         id: 'delete-workspace',

src-web/hooks/useDuplicateGrpcRequest.ts

@@ -20,6 +20,7 @@ export function useDuplicateGrpcRequest({
   const routes = useAppRoutes();
   const protoFiles = useGrpcProtoFiles(id);
   return useMutation<GrpcRequest, string>({
+    mutationKey: ['duplicate_grpc_request', id],
     mutationFn: async () => {
       if (id === null) throw new Error("Can't duplicate a null grpc request");
       return invokeCmd('cmd_duplicate_grpc_request', { id });

src-web/hooks/useDuplicateHttpRequest.ts

@@ -17,6 +17,7 @@ export function useDuplicateHttpRequest({
   const activeEnvironmentId = useActiveEnvironmentId();
   const routes = useAppRoutes();
   return useMutation<HttpRequest, string>({
+    mutationKey: ['duplicate_http_request', id],
     mutationFn: async () => {
       if (id === null) throw new Error("Can't duplicate a null request");
       return invokeCmd('cmd_duplicate_http_request', { id });

src-web/hooks/useExportData.tsx

@@ -14,6 +14,7 @@ export function useExportData() {
   const toast = useToast();
 
   return useMutation({
+    mutationKey: ['export_data'],
     onError: (err: string) => {
       alert({ id: 'export-failed', title: 'Export Failed', body: err });
     },

src-web/hooks/useGrpc.ts

@@ -21,12 +21,14 @@ export function useGrpc(
   const environmentId = useActiveEnvironmentId();
 
   const go = useMutation<void, string>({
+    mutationKey: ['grpc_go', conn?.id],
     mutationFn: async () =>
       await invokeCmd('cmd_grpc_go', { requestId, environmentId, protoFiles }),
     onSettled: () => trackEvent('grpc_request', 'send'),
   });
 
   const send = useMutation({
+    mutationKey: ['grpc_send', conn?.id],
     mutationFn: async ({ message }: { message: string }) =>
       await emit(`grpc_client_msg_${conn?.id ?? 'none'}`, { Message: message }),
     onSettled: () => trackEvent('grpc_connection', 'send'),

src-web/hooks/useImportCurl.ts

@@ -16,6 +16,7 @@ export function useImportCurl({ clearClipboard }: { clearClipboard?: boolean } =
   const [, setClipboardText] = useClipboardText();
 
   return useMutation({
+    mutationKey: ['import_curl'],
     mutationFn: async ({ requestId, command }: { requestId: string | null; command: string }) => {
       const request: Record<string, unknown> = await invokeCmd('cmd_curl_to_request', {
         command,

src-web/hooks/useImportData.tsx

@@ -77,6 +77,7 @@ export function useImportData() {
   };
 
   return useMutation({
+    mutationKey: ['import_data'],
     onError: (err: string) => {
       alert({
         id: 'import-failed',

src-web/hooks/useKeyValue.ts

@@ -32,6 +32,7 @@ export function useKeyValue<T extends Object | null>({
   });
 
   const mutate = useMutation<void, unknown, T>({
+    mutationKey: ['set_key_value', namespace, key],
     mutationFn: (value) => setKeyValue<T>({ namespace, key, value }),
     // k/v should be as fast as possible, so optimistically update the cache
     onMutate: (value) => queryClient.setQueryData<T>(keyValueQueryKey({ namespace, key }), value),

src-web/hooks/useMoveToWorkspace.tsx

@@ -12,7 +12,7 @@ export function useMoveToWorkspace(id: string) {
   const activeWorkspaceId = useActiveWorkspaceId();
 
   return useMutation<void, unknown>({
-    mutationKey: ['moveWorkspace'],
+    mutationKey: ['move_workspace', id],
     mutationFn: async () => {
       if (request == null || activeWorkspaceId == null) return;
 

src-web/hooks/useOpenWorkspace.ts

@@ -8,6 +8,7 @@ export function useOpenWorkspace() {
   const routes = useAppRoutes();
 
   return useMutation({
+    mutationKey: ['open_workspace'],
     mutationFn: async ({
       workspaceId,
       inNewWindow,

src-web/hooks/useSaveResponse.tsx

@@ -13,6 +13,7 @@ export function useSaveResponse(response: HttpResponse) {
   const toast = useToast();
 
   return useMutation({
+    mutationKey: ['save_response', response.id],
     mutationFn: async () => {
       const request = await getHttpRequest(response.requestId);
       if (request == null) return null;

src-web/hooks/useSendAnyRequest.ts

@@ -14,6 +14,7 @@ export function useSendAnyRequest(options: { download?: boolean } = {}) {
   const alert = useAlert();
   const { activeCookieJar } = useActiveCookieJar();
   return useMutation<HttpResponse | null, string, string | null>({
+    mutationKey: ['send_any_request'],
     mutationFn: async (id) => {
       const request = await getHttpRequest(id);
       if (request == null) {

src-web/hooks/useSendFolder.ts

@@ -4,6 +4,7 @@ import { useSendAnyRequest } from './useSendAnyRequest';
 export function useSendManyRequests() {
   const sendAnyRequest = useSendAnyRequest();
   return useMutation<void, string, string[]>({
+    mutationKey: ['send_many_requests'],
     mutationFn: async (requestIds: string[]) => {
       for (const id of requestIds) {
         sendAnyRequest.mutate(id);

src-web/hooks/useSendRequest.ts

@@ -5,6 +5,7 @@ import { useSendAnyRequest } from './useSendAnyRequest';
 export function useSendRequest(id: string | null, options: { download?: boolean } = {}) {
   const sendAnyRequest = useSendAnyRequest(options);
   return useMutation<HttpResponse | null, string>({
+    mutationKey: ['send_http_request', id],
     mutationFn: () => sendAnyRequest.mutateAsync(id),
   });
 }

src-web/hooks/useUpdateAnyFolder.ts

@@ -8,6 +8,7 @@ export function useUpdateAnyFolder() {
   const queryClient = useQueryClient();
 
   return useMutation<void, unknown, { id: string; update: (r: Folder) => Folder }>({
+    mutationKey: ['update_any_folder'],
     mutationFn: async ({ id, update }) => {
       const folder = await getFolder(id);
       if (folder === null) {

src-web/hooks/useUpdateAnyGrpcRequest.ts

@@ -12,6 +12,7 @@ export function useUpdateAnyGrpcRequest() {
     unknown,
     { id: string; update: Partial<GrpcRequest> | ((r: GrpcRequest) => GrpcRequest) }
   >({
+    mutationKey: ['update_any_grpc_request'],
     mutationFn: async ({ id, update }) => {
       const request = await getGrpcRequest(id);
       if (request === null) {

src-web/hooks/useUpdateAnyHttpRequest.ts

@@ -12,6 +12,7 @@ export function useUpdateAnyHttpRequest() {
     unknown,
     { id: string; update: Partial<HttpRequest> | ((r: HttpRequest) => HttpRequest) }
   >({
+    mutationKey: ['update_any_http_request'],
     mutationFn: async ({ id, update }) => {
       const request = await getHttpRequest(id);
       if (request === null) {

src-web/hooks/useUpdateCookieJar.ts

@@ -7,6 +7,7 @@ import { cookieJarsQueryKey } from './useCookieJars';
 export function useUpdateCookieJar(id: string | null) {
   const queryClient = useQueryClient();
   return useMutation<void, unknown, Partial<CookieJar> | ((j: CookieJar) => CookieJar)>({
+    mutationKey: ['update_cookie_jar', id],
     mutationFn: async (v) => {
       const cookieJar = await getCookieJar(id);
       if (cookieJar == null) {

src-web/hooks/useUpdateEnvironment.ts

@@ -7,6 +7,7 @@ import { environmentsQueryKey } from './useEnvironments';
 export function useUpdateEnvironment(id: string | null) {
   const queryClient = useQueryClient();
   return useMutation<void, unknown, Partial<Environment> | ((r: Environment) => Environment)>({
+    mutationKey: ['update_environment', id],
     mutationFn: async (v) => {
       const environment = await getEnvironment(id);
       if (environment == null) {

src-web/hooks/useUpdateGrpcRequest.ts

@@ -5,6 +5,7 @@ import { useUpdateAnyGrpcRequest } from './useUpdateAnyGrpcRequest';
 export function useUpdateGrpcRequest(id: string | null) {
   const updateAnyGrpcRequest = useUpdateAnyGrpcRequest();
   return useMutation<void, unknown, Partial<GrpcRequest> | ((r: GrpcRequest) => GrpcRequest)>({
+    mutationKey: ['update_grpc_request', id],
     mutationFn: async (update) => {
       return updateAnyGrpcRequest.mutateAsync({ id: id ?? 'n/a', update });
     },

src-web/hooks/useUpdateHttpRequest.ts

@@ -5,6 +5,7 @@ import { useUpdateAnyHttpRequest } from './useUpdateAnyHttpRequest';
 export function useUpdateHttpRequest(id: string | null) {
   const updateAnyRequest = useUpdateAnyHttpRequest();
   return useMutation<void, unknown, Partial<HttpRequest> | ((r: HttpRequest) => HttpRequest)>({
+    mutationKey: ['update_http_request', id],
     mutationFn: async (update) => updateAnyRequest.mutateAsync({ id: id ?? 'n/a', update }),
   });
 }

src-web/hooks/useUpdateSettings.ts

@@ -7,6 +7,7 @@ export function useUpdateSettings() {
   const settings = useSettings();
 
   return useMutation<void, unknown, Partial<Settings>>({
+    mutationKey: ['update_settings'],
     mutationFn: async (patch) => {
       if (settings == null) return;
       const newSettings: Settings = { ...settings, ...patch };

src-web/hooks/useUpdateWorkspace.ts

@@ -7,6 +7,7 @@ import { workspacesQueryKey } from './useWorkspaces';
 export function useUpdateWorkspace(id: string | null) {
   const queryClient = useQueryClient();
   return useMutation<void, unknown, Partial<Workspace> | ((w: Workspace) => Workspace)>({
+    mutationKey: ['update_workspace', id],
     mutationFn: async (v) => {
       const workspace = await getWorkspace(id);
       if (workspace == null) {