fix(selectors): refresh caches after environment changes

Author: Bill Leoutsakos

apps/sim/app/api/environment/route.test.ts

@@ -0,0 +1,59 @@
+/**
+ * @vitest-environment node
+ */
+import {
+  auditMock,
+  authMockFns,
+  createMockRequest,
+  dbChainMockFns,
+  environmentUtilsMockFns,
+  posthogServerMock,
+  resetDbChainMock,
+} from '@sim/testing'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { mockEncryptSecret, mockSyncPersonalEnvCredentialsForUser } = vi.hoisted(() => ({
+  mockEncryptSecret: vi.fn(),
+  mockSyncPersonalEnvCredentialsForUser: vi.fn(),
+}))
+
+vi.mock('@sim/audit', () => auditMock)
+vi.mock('@/lib/posthog/server', () => posthogServerMock)
+vi.mock('@/lib/core/security/encryption', () => ({
+  decryptSecret: vi.fn(),
+  encryptSecret: mockEncryptSecret,
+}))
+vi.mock('@/lib/credentials/environment', () => ({
+  syncPersonalEnvCredentialsForUser: mockSyncPersonalEnvCredentialsForUser,
+}))
+
+import { POST } from '@/app/api/environment/route'
+
+describe('POST /api/environment', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    resetDbChainMock()
+    authMockFns.mockGetSession.mockResolvedValue({
+      user: { id: 'user-1', name: 'Test User', email: 'test@example.com' },
+    })
+    mockEncryptSecret.mockResolvedValue({ encrypted: 'encrypted-value' })
+    mockSyncPersonalEnvCredentialsForUser.mockResolvedValue(undefined)
+  })
+
+  it('invalidates the effective environment cache immediately after the database update', async () => {
+    const response = await POST(
+      createMockRequest('POST', { variables: { JIRA_DOMAIN: 'example.atlassian.net' } })
+    )
+
+    expect(response.status).toBe(200)
+    expect(environmentUtilsMockFns.mockInvalidateEffectiveDecryptedEnvCache).toHaveBeenCalledWith({
+      userId: 'user-1',
+    })
+    expect(dbChainMockFns.onConflictDoUpdate.mock.invocationCallOrder[0]).toBeLessThan(
+      environmentUtilsMockFns.mockInvalidateEffectiveDecryptedEnvCache.mock.invocationCallOrder[0]
+    )
+    expect(
+      environmentUtilsMockFns.mockInvalidateEffectiveDecryptedEnvCache.mock.invocationCallOrder[0]
+    ).toBeLessThan(mockSyncPersonalEnvCredentialsForUser.mock.invocationCallOrder[0])
+  })
+})

apps/sim/app/api/environment/route.ts

@@ -14,6 +14,7 @@ import { generateRequestId } from '@/lib/core/utils/request'
 import { withRouteHandler } from '@/lib/core/utils/with-route-handler'
 import { syncPersonalEnvCredentialsForUser } from '@/lib/credentials/environment'
 import type { EnvironmentVariable } from '@/lib/environment/api'
+import { invalidateEffectiveDecryptedEnvCache } from '@/lib/environment/utils'
 import { captureServerEvent } from '@/lib/posthog/server'
 
 const logger = createLogger('EnvironmentAPI')
@@ -69,6 +70,8 @@ export const POST = withRouteHandler(async (req: NextRequest) => {
         },
       })
 
+    invalidateEffectiveDecryptedEnvCache({ userId: session.user.id })
+
     await syncPersonalEnvCredentialsForUser({
       userId: session.user.id,
       envKeys: Object.keys(variables),

apps/sim/hooks/queries/dynamic-subblock-options.ts

@@ -3,6 +3,7 @@ import { useQueries } from '@tanstack/react-query'
 import { buildSelectorContextFromBlock } from '@/lib/workflows/subblocks/context'
 import { summarizeNames } from '@/lib/workflows/subblocks/display'
 import type { SubBlockConfig } from '@/blocks/types'
+import { environmentDependentSelectorKeys } from '@/hooks/selectors/cache-invalidation'
 import {
   createSelectorCacheScopeRegistry,
   scopeServerResolvedSelectorContext,
@@ -18,7 +19,7 @@ export const DYNAMIC_SUBBLOCK_OPTION_STALE_TIME = 30 * 1000
 
 export const dynamicSubBlockOptionKeys = {
   all: ['dynamic-subblock-options'] as const,
-  details: () => [...dynamicSubBlockOptionKeys.all, 'detail'] as const,
+  details: () => environmentDependentSelectorKeys.dynamicDetails,
   /**
    * `selectorScope` is the selector's OWN query key for this context — every context field its
    * result depends on, named by the selector rather than restated here. Without it a label

apps/sim/hooks/queries/environment.test.tsx

@@ -1,21 +1,33 @@
 /**
  * @vitest-environment jsdom
  */
-import { act } from 'react'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { createRoot } from 'react-dom/client'
-import { afterEach, describe, expect, it, vi } from 'vitest'
+import { act, type ReactNode } from 'react'
+import { sleep } from '@sim/utils/helpers'
+import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-const { mockFetchWorkspaceEnvironment } = vi.hoisted(() => ({
+const { mockFetchWorkspaceEnvironment, mockRequestJson } = vi.hoisted(() => ({
   mockFetchWorkspaceEnvironment: vi.fn(),
+  mockRequestJson: vi.fn(),
 }))
 
+vi.mock('@/lib/api/client/request', () => ({ requestJson: mockRequestJson }))
+
 vi.mock('@/lib/environment/api', () => ({
   fetchPersonalEnvironment: vi.fn(),
   fetchWorkspaceEnvironment: mockFetchWorkspaceEnvironment,
 }))
 
-import { useWorkspaceEnvironment } from '@/hooks/queries/environment'
+import type { QueryKey } from '@tanstack/react-query'
+import {
+  environmentKeys,
+  useRemoveWorkspaceEnvironment,
+  useSavePersonalEnvironment,
+  useUpsertWorkspaceEnvironment,
+  useWorkspaceEnvironment,
+} from '@/hooks/queries/environment'
+import { environmentDependentSelectorKeys } from '@/hooks/selectors/cache-invalidation'
 
 function renderWorkspaceEnvironment(workspaceId: string, enabled?: boolean) {
   ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
@@ -41,10 +53,112 @@ function renderWorkspaceEnvironment(workspaceId: string, enabled?: boolean) {
   return () => act(() => root.unmount())
 }
 
-afterEach(() => {
+interface CacheQueryFns {
+  environment: ReturnType<typeof vi.fn>
+  primary: ReturnType<typeof vi.fn>
+  dynamicDetails: ReturnType<typeof vi.fn>
+  workflowDetails: ReturnType<typeof vi.fn>
+  workflowReplacementOptions: ReturnType<typeof vi.fn>
+  unrelated: ReturnType<typeof vi.fn>
+}
+
+function createCacheQueryFns(): CacheQueryFns {
+  return {
+    environment: vi.fn().mockResolvedValue('environment'),
+    primary: vi.fn().mockResolvedValue('primary'),
+    dynamicDetails: vi.fn().mockResolvedValue('dynamic'),
+    workflowDetails: vi.fn().mockResolvedValue('workflow-detail'),
+    workflowReplacementOptions: vi.fn().mockResolvedValue('workflow-options'),
+    unrelated: vi.fn().mockResolvedValue('unrelated'),
+  }
+}
+
+function renderMutationWithCaches<T>(
+  useMutationHook: () => T,
+  environmentQueryKey: QueryKey,
+  queryFns: CacheQueryFns
+): { result: () => T; unmount: () => void } {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false, staleTime: Number.POSITIVE_INFINITY },
+      mutations: { retry: false },
+    },
+  })
+  const container = document.createElement('div')
+  const root: Root = createRoot(container)
+  let latest: T
+
+  function Probe() {
+    useQuery({ queryKey: environmentQueryKey, queryFn: queryFns.environment })
+    useQuery({
+      queryKey: [...environmentDependentSelectorKeys.primary, 'jira.projects', 'scope'],
+      queryFn: queryFns.primary,
+    })
+    useQuery({
+      queryKey: [...environmentDependentSelectorKeys.dynamicDetails, 'jira.project', 'scope'],
+      queryFn: queryFns.dynamicDetails,
+    })
+    useQuery({
+      queryKey: [...environmentDependentSelectorKeys.workflowDetails, 'jira.projects', 'scope'],
+      queryFn: queryFns.workflowDetails,
+    })
+    useQuery({
+      queryKey: [
+        ...environmentDependentSelectorKeys.workflowReplacementOptions,
+        'jira.projects',
+        'scope',
+      ],
+      queryFn: queryFns.workflowReplacementOptions,
+    })
+    useQuery({ queryKey: ['unrelated-user-data'], queryFn: queryFns.unrelated })
+    latest = useMutationHook()
+    return null
+  }
+
+  function Wrapper({ children }: { children: ReactNode }) {
+    return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  }
+
+  act(() => {
+    root.render(
+      <Wrapper>
+        <Probe />
+      </Wrapper>
+    )
+  })
+
+  return {
+    result: () => latest,
+    unmount: () => act(() => root.unmount()),
+  }
+}
+
+async function flush() {
+  await act(async () => {
+    for (let i = 0; i < 5; i++) {
+      await Promise.resolve()
+      await sleep(0)
+    }
+  })
+}
+
+function expectOnlyEnvironmentAndSelectorCachesRefetched(queryFns: CacheQueryFns) {
+  expect(queryFns.environment).toHaveBeenCalledTimes(2)
+  expect(queryFns.primary).toHaveBeenCalledTimes(2)
+  expect(queryFns.dynamicDetails).toHaveBeenCalledTimes(2)
+  expect(queryFns.workflowDetails).toHaveBeenCalledTimes(2)
+  expect(queryFns.workflowReplacementOptions).toHaveBeenCalledTimes(2)
+  expect(queryFns.unrelated).toHaveBeenCalledTimes(1)
+}
+
+beforeEach(() => {
   vi.clearAllMocks()
+  mockRequestJson.mockResolvedValue({ success: true })
 })
 
+afterEach(() => vi.restoreAllMocks())
+
 describe('useWorkspaceEnvironment', () => {
   it('does not run without a workspace ID even when the caller enables it', () => {
     const unmount = renderWorkspaceEnvironment('', true)
@@ -60,3 +174,86 @@ describe('useWorkspaceEnvironment', () => {
     unmount()
   })
 })
+
+describe('environment mutation selector freshness', () => {
+  it('refetches every selector-bearing cache after a successful personal save', async () => {
+    const queryFns = createCacheQueryFns()
+    const view = renderMutationWithCaches(
+      useSavePersonalEnvironment,
+      environmentKeys.personal(),
+      queryFns
+    )
+    await flush()
+
+    await act(async () => {
+      await view.result().mutateAsync({ variables: { DOMAIN: 'new-value' } })
+    })
+    await flush()
+
+    expectOnlyEnvironmentAndSelectorCachesRefetched(queryFns)
+    view.unmount()
+  })
+
+  it.each([
+    {
+      name: 'upsert',
+      useMutationHook: useUpsertWorkspaceEnvironment,
+      variables: { workspaceId: 'workspace-1', variables: { DOMAIN: 'new-value' } },
+    },
+    {
+      name: 'removal',
+      useMutationHook: useRemoveWorkspaceEnvironment,
+      variables: { workspaceId: 'workspace-1', keys: ['DOMAIN'] },
+    },
+  ])('refetches every selector-bearing cache after a successful workspace $name', async (test) => {
+    const queryFns = createCacheQueryFns()
+    const view = renderMutationWithCaches(
+      test.useMutationHook,
+      environmentKeys.workspace('workspace-1'),
+      queryFns
+    )
+    await flush()
+
+    await act(async () => {
+      const mutation = view.result() as {
+        mutateAsync: (variables: unknown) => Promise<unknown>
+      }
+      await mutation.mutateAsync(test.variables)
+    })
+    await flush()
+
+    expectOnlyEnvironmentAndSelectorCachesRefetched(queryFns)
+    view.unmount()
+  })
+
+  it('does not invalidate selector caches after a failed environment mutation', async () => {
+    const requestError = new Error('save failed')
+    mockRequestJson.mockRejectedValueOnce(requestError)
+    const queryFns = createCacheQueryFns()
+    const view = renderMutationWithCaches(
+      useSavePersonalEnvironment,
+      environmentKeys.personal(),
+      queryFns
+    )
+    await flush()
+
+    let caught: unknown
+    await act(async () => {
+      try {
+        await view.result().mutateAsync({ variables: { DOMAIN: 'new-value' } })
+      } catch (error) {
+        caught = error
+      }
+    })
+    await flush()
+
+    expect(caught).toBe(requestError)
+    expect(queryFns.environment).toHaveBeenCalledTimes(2)
+    expect(queryFns.primary).toHaveBeenCalledTimes(1)
+    expect(queryFns.dynamicDetails).toHaveBeenCalledTimes(1)
+    expect(queryFns.workflowDetails).toHaveBeenCalledTimes(1)
+    expect(queryFns.workflowReplacementOptions).toHaveBeenCalledTimes(1)
+    expect(queryFns.unrelated).toHaveBeenCalledTimes(1)
+    view.unmount()
+  })
+})

apps/sim/hooks/queries/environment.ts

@@ -9,6 +9,7 @@ import {
 } from '@/lib/api/contracts'
 import type { WorkspaceEnvironmentData } from '@/lib/environment/api'
 import { fetchPersonalEnvironment, fetchWorkspaceEnvironment } from '@/lib/environment/api'
+import { invalidateEnvironmentDependentSelectorQueries } from '@/hooks/selectors/cache-invalidation'
 
 const logger = createLogger('EnvironmentQueries')
 
@@ -75,11 +76,12 @@ export function useSavePersonalEnvironment() {
 
       logger.info('Saved personal environment variables')
     },
-    onSettled: async () => {
+    onSettled: async (_data, error) => {
       await Promise.all([
         queryClient.invalidateQueries({ queryKey: environmentKeys.personal() }),
         queryClient.invalidateQueries({ queryKey: environmentKeys.workspaces() }),
       ])
+      if (!error) await invalidateEnvironmentDependentSelectorQueries(queryClient)
     },
   })
 }
@@ -103,10 +105,12 @@ export function useUpsertWorkspaceEnvironment() {
       logger.info(`Upserted workspace environment variables for workspace: ${workspaceId}`)
       return data
     },
-    onSettled: (_data, _error, variables) =>
-      queryClient.invalidateQueries({
+    onSettled: async (_data, error, variables) => {
+      await queryClient.invalidateQueries({
         queryKey: environmentKeys.workspace(variables.workspaceId),
-      }),
+      })
+      if (!error) await invalidateEnvironmentDependentSelectorQueries(queryClient)
+    },
   })
 }
 
@@ -129,9 +133,11 @@ export function useRemoveWorkspaceEnvironment() {
       logger.info(`Removed ${keys.length} workspace environment keys for workspace: ${workspaceId}`)
       return data
     },
-    onSettled: (_data, _error, variables) =>
-      queryClient.invalidateQueries({
+    onSettled: async (_data, error, variables) => {
+      await queryClient.invalidateQueries({
         queryKey: environmentKeys.workspace(variables.workspaceId),
-      }),
+      })
+      if (!error) await invalidateEnvironmentDependentSelectorQueries(queryClient)
+    },
   })
 }