feat: unify react-query query keys

packages/web/src/components/ChooseConnectionSubstep/index.jsx

@@ -186,7 +186,7 @@ function ChooseConnectionSubstep(props) {
           });
 
           await queryClient.invalidateQueries({
-            queryKey: ['stepConnection', step.id],
+            queryKey: ['steps', step.id, 'connection'],
           });
         }
       }

packages/web/src/components/DeleteRoleButton/index.ee.jsx

@@ -25,7 +25,7 @@ function DeleteRoleButton(props) {
   const handleConfirm = React.useCallback(async () => {
     try {
       await deleteRole();
-      queryClient.invalidateQueries({ queryKey: ['roles'] });
+      queryClient.invalidateQueries({ queryKey: ['admin', 'roles'] });
       setShowConfirmation(false);
       enqueueSnackbar(formatMessage('deleteRoleButton.successfullyDeleted'), {
         variant: 'success',

packages/web/src/components/DeleteUserButton/index.ee.jsx

@@ -25,7 +25,6 @@ function DeleteUserButton(props) {
     try {
       await deleteUser();
       queryClient.invalidateQueries({ queryKey: ['admin', 'users'] });
-      queryClient.invalidateQueries({ queryKey: ['admin', 'user', userId] });
       setShowConfirmation(false);
       enqueueSnackbar(formatMessage('deleteUserButton.successfullyDeleted'), {
         variant: 'success',

packages/web/src/components/Editor/index.jsx

@@ -39,9 +39,9 @@ function Editor(props) {
 
       await updateStep({ variables: { input: mutationInput } });
       await queryClient.invalidateQueries({
-        queryKey: ['stepConnection', step.id],
+        queryKey: ['steps', step.id, 'connection'],
       });
-      await queryClient.invalidateQueries({ queryKey: ['flow', flow.id] });
+      await queryClient.invalidateQueries({ queryKey: ['flows', flow.id] });
     },
     [updateStep, flow.id, queryClient],
   );
@@ -63,7 +63,7 @@ function Editor(props) {
 
       const createdStepId = createdStep.data.createStep.id;
       setCurrentStepId(createdStepId);
-      await queryClient.invalidateQueries({ queryKey: ['flow', flow.id] });
+      await queryClient.invalidateQueries({ queryKey: ['flows', flow.id] });
     },
     [createStep, flow.id, queryClient],
   );

packages/web/src/components/EditorLayout/index.jsx

@@ -48,7 +48,7 @@ export default function EditorLayout() {
         },
       });
 
-      await queryClient.invalidateQueries({ queryKey: ['flow', flowId] });
+      await queryClient.invalidateQueries({ queryKey: ['flows', flowId] });
     },
     [flowId, queryClient],
   );
@@ -71,7 +71,7 @@ export default function EditorLayout() {
         },
       });
 
-      await queryClient.invalidateQueries({ queryKey: ['flow', flowId] });
+      await queryClient.invalidateQueries({ queryKey: ['flows', flowId] });
     },
     [flowId, queryClient],
   );

packages/web/src/components/FlowContextMenu/index.jsx

@@ -28,7 +28,9 @@ function ContextMenu(props) {
       variables: { input: { id: flowId } },
     });
 
-    await queryClient.invalidateQueries({ queryKey: ['appFlows', appKey] });
+    await queryClient.invalidateQueries({
+      queryKey: ['apps', appKey, 'flows'],
+    });
     enqueueSnackbar(formatMessage('flow.successfullyDuplicated'), {
       variant: 'success',
       SnackbarProps: {
@@ -54,7 +56,9 @@ function ContextMenu(props) {
       },
     });
 
-    await queryClient.invalidateQueries({ queryKey: ['appFlows', appKey] });
+    await queryClient.invalidateQueries({
+      queryKey: ['apps', appKey, 'flows'],
+    });
     enqueueSnackbar(formatMessage('flow.successfullyDeleted'), {
       variant: 'success',
     });

packages/web/src/components/FlowStepContextMenu/index.jsx

@@ -19,7 +19,7 @@ function FlowStepContextMenu(props) {
     async (event) => {
       event.stopPropagation();
       await deleteStep({ variables: { input: { id: stepId } } });
-      await queryClient.invalidateQueries({ queryKey: ['flow', flowId] });
+      await queryClient.invalidateQueries({ queryKey: ['flows', flowId] });
     },
     [stepId, queryClient],
   );

packages/web/src/components/TestSubstep/index.jsx

@@ -82,7 +82,7 @@ function TestSubstep(props) {
     });
 
     await queryClient.invalidateQueries({
-      queryKey: ['flow', flowId],
+      queryKey: ['flows', flowId],
     });
   }, [onSubmit, onContinue, isCompleted, queryClient, flowId]);
 

packages/web/src/components/UsageDataInformation/index.ee.jsx

@@ -94,7 +94,7 @@ export default function UsageDataInformation() {
 
   React.useEffect(() => {
     queryClient.invalidateQueries({
-      queryKey: ['planAndUsage', currentUserId],
+      queryKey: ['users', currentUserId, 'planAndUsage'],
     });
   }, [subscription, queryClient, currentUserId]);
 

packages/web/src/contexts/Paddle.ee.jsx

@@ -31,11 +31,11 @@ export const PaddleProvider = (props) => {
           // Paddle has side effects in the background,
           // so we need to refetch the relevant queries
           await queryClient.refetchQueries({
-            queryKey: ['userTrial'],
+            queryKey: ['users', 'me', 'trial'],
           });
 
           await queryClient.refetchQueries({
-            queryKey: ['subscription'],
+            queryKey: ['users', 'me', 'subscription'],
           });
 
           navigate(URLS.SETTINGS_BILLING_AND_USAGE, {

packages/web/src/hooks/useActionSubsteps.js

@@ -4,7 +4,7 @@ import api from 'helpers/api';
 
 export default function useActionSubsteps({ appKey, actionKey }) {
   const query = useQuery({
-    queryKey: ['actionSubsteps', appKey, actionKey],
+    queryKey: ['apps', appKey, 'actions', actionKey, 'substeps'],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(
         `/v1/apps/${appKey}/actions/${actionKey}/substeps`,

packages/web/src/hooks/useActions.js

@@ -4,7 +4,7 @@ import api from 'helpers/api';
 
 export default function useActions(appKey) {
   const query = useQuery({
-    queryKey: ['actions', appKey],
+    queryKey: ['apps', appKey, 'actions'],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(`/v1/apps/${appKey}/actions`, {
         signal,

packages/web/src/hooks/useAdminAppAuthClient.ee.js

@@ -4,7 +4,7 @@ import api from 'helpers/api';
 
 export default function useAdminAppAuthClient(id) {
   const query = useQuery({
-    queryKey: ['adminAppAuthClient', id],
+    queryKey: ['admin', 'appAuthClients', id],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(`/v1/admin/app-auth-clients/${id}`, {
         signal,

packages/web/src/hooks/useAdminSamlAuthProviderRoleMappings.js

@@ -3,13 +3,13 @@ import { useQuery } from '@tanstack/react-query';
 import api from 'helpers/api';
 
 export default function useAdminSamlAuthProviderRoleMappings({
-  adminSamlAuthProviderId,
+  adminSamlAuthProviderId: providerId,
 }) {
   const query = useQuery({
-    queryKey: ['adminSamlAuthProviderRoleMappings', adminSamlAuthProviderId],
+    queryKey: ['admin', 'samlAuthProviders', providerId, 'roleMappings'],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(
-        `/v1/admin/saml-auth-providers/${adminSamlAuthProviderId}/role-mappings`,
+        `/v1/admin/saml-auth-providers/${providerId}/role-mappings`,
         {
           signal,
         },
@@ -17,7 +17,7 @@ export default function useAdminSamlAuthProviderRoleMappings({
 
       return data;
     },
-    enabled: !!adminSamlAuthProviderId,
+    enabled: !!providerId,
   });
 
   return query;

packages/web/src/hooks/useAdminSamlAuthProviders.ee.js

@@ -4,7 +4,7 @@ import api from 'helpers/api';
 
 export default function useAdminSamlAuthProviders() {
   const query = useQuery({
-    queryKey: ['adminSamlAuthProviders'],
+    queryKey: ['admin', 'samlAuthProviders'],
     queryFn: async ({ signal }) => {
       const { data } = await api.get('/v1/admin/saml-auth-providers', {
         signal,

packages/web/src/hooks/useAdminUser.js

@@ -3,7 +3,7 @@ import api from 'helpers/api';
 
 export default function useAdminUser({ userId }) {
   const query = useQuery({
-    queryKey: ['admin', 'user', userId],
+    queryKey: ['admin', 'users', userId],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(`/v1/admin/users/${userId}`, {
         signal,

packages/web/src/hooks/useAdminUsers.js

@@ -3,7 +3,7 @@ import api from 'helpers/api';
 
 export default function useAdminUsers(page) {
   const query = useQuery({
-    queryKey: ['admin', 'users', page],
+    queryKey: ['admin', 'users', { page }],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(`/v1/admin/users`, {
         signal,

packages/web/src/hooks/useApp.js

@@ -4,7 +4,7 @@ import api from 'helpers/api';
 
 export default function useApp(appKey) {
   const query = useQuery({
-    queryKey: ['app', appKey],
+    queryKey: ['apps', appKey],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(`/v1/apps/${appKey}`, {
         signal,

packages/web/src/hooks/useAppAuth.js

@@ -4,7 +4,7 @@ import api from 'helpers/api';
 
 export default function useAppAuth(appKey) {
   const query = useQuery({
-    queryKey: ['appAuth', appKey],
+    queryKey: ['apps', appKey, 'auth'],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(`/v1/apps/${appKey}/auth`, {
         signal,

packages/web/src/hooks/useAppConfig.ee.js

@@ -3,7 +3,7 @@ import api from 'helpers/api';
 
 export default function useAppConfig(appKey) {
   const query = useQuery({
-    queryKey: ['appConfig', appKey],
+    queryKey: ['apps', appKey, 'config'],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(`/v1/apps/${appKey}/config`, {
         signal,

packages/web/src/hooks/useAppConnections.js

@@ -4,7 +4,7 @@ import api from 'helpers/api';
 
 export default function useAppConnections(appKey) {
   const query = useQuery({
-    queryKey: ['appConnections', appKey],
+    queryKey: ['apps', appKey, 'connections'],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(`/v1/apps/${appKey}/connections`, {
         signal,

packages/web/src/hooks/useAppFlows.js

@@ -4,7 +4,7 @@ import api from 'helpers/api';
 
 export default function useAppFlows({ appKey, page }, { enabled }) {
   const query = useQuery({
-    queryKey: ['appFlows', appKey, page],
+    queryKey: ['apps', appKey, 'flows', { page }],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(`/v1/apps/${appKey}/flows`, {
         params: {

packages/web/src/hooks/useAutomatischInfo.js

@@ -8,7 +8,7 @@ export default function useAutomatischInfo() {
      * So we can set the `staleTime` to Infinity
      **/
     staleTime: Infinity,
-    queryKey: ['automatischInfo'],
+    queryKey: ['automatisch', 'info'],
     queryFn: async (payload, signal) => {
       const { data } = await api.get('/v1/automatisch/info', { signal });
 

packages/web/src/hooks/useConnectionFlows.js

@@ -7,7 +7,7 @@ export default function useConnectionFlows(
   { enabled } = {},
 ) {
   const query = useQuery({
-    queryKey: ['connectionFlows', connectionId, page],
+    queryKey: ['connections', connectionId, 'flows', { page }],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(`/v1/connections/${connectionId}/flows`, {
         params: {

packages/web/src/hooks/useCurrentUser.js

@@ -4,7 +4,7 @@ import api from 'helpers/api';
 
 export default function useCurrentUser() {
   const query = useQuery({
-    queryKey: ['currentUser'],
+    queryKey: ['users', 'me'],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(`/v1/users/me`, {
         signal,

packages/web/src/hooks/useDynamicFields.js

@@ -74,7 +74,7 @@ function useDynamicFields(stepId, schema) {
   }, [schema, formValues, getValues]);
 
   const query = useQuery({
-    queryKey: ['dynamicFields', stepId, computedVariables],
+    queryKey: ['steps', stepId, 'dynamicFields', computedVariables],
     queryFn: async ({ signal }) => {
       const { data } = await api.post(
         `/v1/steps/${stepId}/dynamic-fields`,

packages/web/src/hooks/useExecution.js

@@ -4,7 +4,7 @@ import api from 'helpers/api';
 
 export default function useExecution({ executionId }) {
   const query = useQuery({
-    queryKey: ['execution', executionId],
+    queryKey: ['executions', executionId],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(`/v1/executions/${executionId}`, {
         signal,

packages/web/src/hooks/useExecutionSteps.js

@@ -4,7 +4,7 @@ import api from 'helpers/api';
 
 export default function useExecutionSteps({ executionId }) {
   const query = useInfiniteQuery({
-    queryKey: ['executionSteps', executionId],
+    queryKey: ['executions', executionId, 'executionSteps'],
     queryFn: async ({ pageParam = 1, signal }) => {
       const { data } = await api.get(
         `/v1/executions/${executionId}/execution-steps`,

packages/web/src/hooks/useExecutions.js

@@ -4,7 +4,7 @@ import api from 'helpers/api';
 
 export default function useExecutions({ page }, { refetchInterval } = {}) {
   const query = useQuery({
-    queryKey: ['executions', page],
+    queryKey: ['executions', { page }],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(`/v1/executions`, {
         params: {

packages/web/src/hooks/useFlow.js

@@ -4,7 +4,7 @@ import api from 'helpers/api';
 
 export default function useFlow(flowId) {
   const query = useQuery({
-    queryKey: ['flow', flowId],
+    queryKey: ['flows', flowId],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(`/v1/flows/${flowId}`, {
         signal,

packages/web/src/hooks/useInvoices.ee.js

@@ -4,7 +4,7 @@ import api from 'helpers/api';
 
 export default function useInvoices() {
   const query = useQuery({
-    queryKey: ['invoices'],
+    queryKey: ['users', 'invoices'],
     queryFn: async ({ signal }) => {
       const { data } = await api.get('/v1/users/invoices', {
         signal,

packages/web/src/hooks/usePaddleInfo.ee.js

@@ -3,7 +3,7 @@ import api from 'helpers/api';
 
 export default function usePaddleInfo() {
   const query = useQuery({
-    queryKey: ['paddleInfo'],
+    queryKey: ['payment', 'paddleInfo'],
     queryFn: async ({ signal }) => {
       const { data } = await api.get('/v1/payment/paddle-info', {
         signal,

packages/web/src/hooks/usePaymentPlans.ee.js

@@ -4,7 +4,7 @@ import api from 'helpers/api';
 
 export default function usePaymentPlans() {
   const query = useQuery({
-    queryKey: ['paymentPlans'],
+    queryKey: ['payment', 'plans'],
     queryFn: async ({ signal }) => {
       const { data } = await api.get('/v1/payment/plans', {
         signal,

packages/web/src/hooks/usePermissionCatalog.ee.js

@@ -4,7 +4,7 @@ import api from 'helpers/api';
 
 export default function usePermissionCatalog() {
   const query = useQuery({
-    queryKey: ['permissionCatalog'],
+    queryKey: ['admin', 'permissions', 'catalog'],
     queryFn: async ({ signal }) => {
       const { data } = await api.get('/v1/admin/permissions/catalog', {
         signal,

packages/web/src/hooks/usePlanAndUsage.js

@@ -4,7 +4,7 @@ import api from 'helpers/api';
 
 export default function usePlanAndUsage(userId) {
   const query = useQuery({
-    queryKey: ['planAndUsage', userId],
+    queryKey: ['users', userId, 'planAndUsage'],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(`/v1/users/${userId}/plan-and-usage`, {
         signal,

packages/web/src/hooks/useRole.ee.js

@@ -4,7 +4,7 @@ import api from 'helpers/api';
 
 export default function useRole({ roleId }) {
   const query = useQuery({
-    queryKey: ['role', roleId],
+    queryKey: ['admin', 'roles', roleId],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(`/v1/admin/roles/${roleId}`, {
         signal,

packages/web/src/hooks/useRoles.ee.js

@@ -4,7 +4,7 @@ import api from 'helpers/api';
 export default function useRoles() {
   const query = useQuery({
     staleTime: 0,
-    queryKey: ['roles'],
+    queryKey: ['admin', 'roles'],
     queryFn: async ({ signal }) => {
       const { data } = await api.get('/v1/admin/roles', {
         signal,

packages/web/src/hooks/useSamlAuthProvider.js

@@ -4,7 +4,7 @@ import api from 'helpers/api';
 
 export default function useSamlAuthProvider({ samlAuthProviderId } = {}) {
   const query = useQuery({
-    queryKey: ['samlAuthProvider', samlAuthProviderId],
+    queryKey: ['samlAuthProviders', samlAuthProviderId],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(
         `/v1/admin/saml-auth-providers/${samlAuthProviderId}`,

packages/web/src/hooks/useStepConnection.js

@@ -4,7 +4,7 @@ import api from 'helpers/api';
 
 export default function useStepConnection(stepId) {
   const query = useQuery({
-    queryKey: ['stepConnection', stepId],
+    queryKey: ['steps', stepId, 'connection'],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(`/v1/steps/${stepId}/connection`, {
         signal,

packages/web/src/hooks/useStepWithTestExecutions.js

@@ -4,7 +4,7 @@ import api from 'helpers/api';
 
 export default function useStepWithTestExecutions(stepId) {
   const query = useQuery({
-    queryKey: ['stepWithTestExecutions', stepId],
+    queryKey: ['steps', stepId, 'previousSteps'],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(`/v1/steps/${stepId}/previous-steps`, {
         signal,

packages/web/src/hooks/useSubscription.ee.js

@@ -25,7 +25,7 @@ export default function useSubscription() {
   const [isPolling, setIsPolling] = React.useState(false);
 
   const { data } = useQuery({
-    queryKey: ['subscription'],
+    queryKey: ['users', 'me', 'subscription'],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(`/v1/users/me/subscription`, {
         signal,

packages/web/src/hooks/useTriggerSubsteps.js

@@ -4,7 +4,7 @@ import api from 'helpers/api';
 
 export default function useTriggerSubsteps({ appKey, triggerKey }) {
   const query = useQuery({
-    queryKey: ['triggerSubsteps', appKey, triggerKey],
+    queryKey: ['apps', appKey, 'triggers', triggerKey, 'substeps'],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(
         `/v1/apps/${appKey}/triggers/${triggerKey}/substeps`,

packages/web/src/hooks/useTriggers.js

@@ -4,7 +4,7 @@ import api from 'helpers/api';
 
 export default function useTriggers(appKey) {
   const query = useQuery({
-    queryKey: ['triggers', appKey],
+    queryKey: ['apps', appKey, 'triggers'],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(`/v1/apps/${appKey}/triggers`, {
         signal,

packages/web/src/hooks/useUserTrial.ee.js

@@ -42,7 +42,7 @@ export default function useUserTrial() {
   const formatMessage = useFormatMessage();
 
   const { data } = useQuery({
-    queryKey: ['userTrial'],
+    queryKey: ['users', 'me', 'trial'],
     queryFn: async ({ signal }) => {
       const { data } = await api.get('/v1/users/me/trial', {
         signal,

packages/web/src/hooks/useVersion.js

@@ -7,7 +7,7 @@ import api from 'helpers/api';
 export default function useVersion() {
   const { data: notificationsData } = useAutomatischNotifications();
   const { data } = useQuery({
-    queryKey: ['automatischVersion'],
+    queryKey: ['automatisch', 'version'],
     queryFn: async ({ signal }) => {
       const { data } = await api.get('/v1/automatisch/version', {
         signal,

packages/web/src/pages/EditUser/index.jsx

@@ -52,7 +52,6 @@ export default function EditUser() {
         },
       });
       queryClient.invalidateQueries({ queryKey: ['admin', 'users'] });
-      queryClient.invalidateQueries({ queryKey: ['admin', 'user', userId] });
 
       enqueueSnackbar(formatMessage('editUser.successfullyUpdated'), {
         variant: 'success',