Skip to content

Lift query submission into QueryProvider to survive page navigation #802

@frano-m

Description

@frano-m

Problem

The Form component (and the useQuery hook it uses) unmounts when navigating between Next.js pages. This causes:

  1. The useEffect cleanup in useQuery aborts in-flight fetch requests
  2. The dispatch callbacks (onSuccess, onError, onSettled) wired in the Form are lost
  3. The user navigates to the results page with no results because the fetch was cancelled

Solution

Move the fetch lifecycle into a QueryProvider that sits under ChatProvider in the consuming app's layout, so it persists across page navigation.

Current flow (broken)

ChatProvider (persists in layout)
  └── Assistant (unmounts on navigation)
       ├── useAdapter() → useQuery(url)
       └── Form (wires dispatch callbacks)

Target flow (fixed)

ChatProvider (persists in layout)
  └── QueryProvider (persists in layout, owns fetch + dispatch wiring)
       └── Assistant (can unmount safely)
            └── Form (thin wrapper, calls provider's onSubmit)

Changes

  • New: QueryProvider in state/query/ — owns AbortController, dispatch wiring, and fetchResponse call
  • New: useQuerySubmit hook — consumer hook to access onSubmit from provider context
  • New: useFocusOnSettled hook — focuses input when loading transitions to false
  • Modify: Form — becomes thin wrapper using useQuerySubmit
  • Modify: Assistant — remove useAdapter() call, simplify Form props
  • Delete: query/useQuery.ts and adapter/useAdapter.ts — logic absorbed into QueryProvider
  • Update: Tests rewritten for QueryProvider

Consuming app migration

<ChatProvider initialArgs={prompt}>
  <QueryProvider>
    {children}
  </QueryProvider>
</ChatProvider>

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions