Skip to content

refactor: eliminate local state mirroring, use TanStack Query as single source of truth#265

Merged
chubes4 merged 1 commit intoExtra-Chill:mainfrom
Sarai-Chinwag:refactor/tanstack-single-source-of-truth
Feb 17, 2026
Merged

refactor: eliminate local state mirroring, use TanStack Query as single source of truth#265
chubes4 merged 1 commit intoExtra-Chill:mainfrom
Sarai-Chinwag:refactor/tanstack-single-source-of-truth

Conversation

@saraichinwag
Copy link
Copy Markdown
Contributor

Summary

Eliminates local state mirroring patterns that bypass TanStack Query's cache, addressing the root cause of race conditions like #262 (blank fields on initial load).

Closes #263

Changes

PipelineContextFiles.jsx

  • Removed all manual state (files, loading, error, uploading, deleting) and the loadFiles fetch-in-useEffect pattern
  • Now uses useContextFiles(pipelineId), useUploadContextFile(), and useDeleteContextFile() — TanStack hooks that already existed but were unused
  • TanStack Query handles caching, loading states, and automatic refetch after mutations

InlineStepConfig.jsx

  • Replaced useEffect-based initialization of localValues with useMemo to derive initial values from handlerConfig prop + field schema
  • Replaced raw updateFlowStepConfig() API call with new useUpdateFlowStepConfig mutation that properly invalidates flow query cache on success
  • Local state for controlled inputs is preserved (needed for typing without per-keystroke cache updates)

FlowScheduleModal.jsx

  • Replaced manual intervals fetch-in-useEffect + useAsyncOperation with new useSchedulingIntervals() TanStack query hook
  • Intervals are cached with staleTime: Infinity since they don't change at runtime

New hooks

  • useUpdateFlowStepConfig in queries/flows.js — mutation for flow step config updates with cache invalidation
  • useSchedulingIntervals in queries/config.js — query for scheduling interval options

FlowStepCard.jsx

  • Passes pipelineId and flowId to InlineStepConfig for proper cache invalidation

Not changed (lower priority)

  • PromptField.jsx — pattern is mostly correct (local state for controlled input + useEffect sync from prop is fine)
  • QueueablePromptField.jsx — already uses TanStack mutations for queue saves

Testing

  • Pure internal refactor — no visual or behavioral changes
  • All imports/exports verified consistent

…le source of truth (Extra-Chill#263)

- PipelineContextFiles: replace manual fetch/state with useContextFiles,
  useUploadContextFile, useDeleteContextFile TanStack hooks
- InlineStepConfig: derive initial values via useMemo instead of useEffect,
  create useUpdateFlowStepConfig mutation for saves instead of raw API call
- FlowScheduleModal: replace manual intervals fetch with useSchedulingIntervals
  query hook (added to config.js)
- FlowStepCard: pass pipelineId/flowId to InlineStepConfig for cache invalidation
- Add useUpdateFlowStepConfig mutation to queries/flows.js
- Add useSchedulingIntervals query to queries/config.js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

refactor: eliminate local state mirroring in favor of TanStack Query as single source of truth

2 participants