#18501 · @Brendonovich · opened Mar 21, 2026 at 8:32 AM UTC · last updated Mar 21, 2026 at 9:05 AM UTC

app: manage mutation loading states with tanstack query

apprefactor

+447−43514 files

Score breakdown

Impact

6.0

Clarity

4.0

Urgency

2.0

Ease Of Review

2.0

Guidelines

2.0

Readiness

2.0

Size

1.0

Trust

10.0

Traction

0.0

Summary

This PR integrates Tanstack Query to standardize loading state management. It aims to reduce boilerplate code for asynchronous operations within the app.

Open in GitHub

Description

This provides us with a unified way to manage loading states and reduces the amount of bookkeeping state and logic we have for async stuff.

Linked Issues

None.

Comments

No comments.

Changed Files

bun.lock

+5−0

@@ -44,6 +44,7 @@

"@solid-primitives/websocket": "1.3.1",

"@solidjs/meta": "catalog:",

"@solidjs/router": "catalog:",

"@tanstack/solid-query": "5.91.4",

"@thisbeyond/solid-dnd": "0.7.5",

"diff": "catalog:",

"effect": "catalog:",

@@ -1966,10 +1967,14 @@

"@tanstack/directive-functions-plugin": ["@tanstack/directive-functions-plugin@1.134.5", "", { "dependencies": { "@babel/code-frame": "7.27.1", "@babel/core": "^7.27.7", "@babel/traverse": "^7.27.7", "@babel/types": "^7.27.7", "@tanstack/router-utils": "1.133.19", "babel-dead-code-elimination": "^1.0.10", "pathe": "^2.0.3", "tiny-invariant": "^1.3.3" }, "peerDependencies": { "vite": ">=6.0.0 || >=7.0.0" } }, "sha512-J3oawV8uBRBbPoLgMdyHt+LxzTNuWRKNJJuCLWsm/yq6v0IQSvIVCgfD2+liIiSnDPxGZ8ExduPXy8IzS70eXw=="],

"@tanstack/query-core": ["@tanstack/query-core@5.91.2", "", {}, "sha512-Uz2pTgPC1mhqrrSGg18RKCWT/pkduAYtxbcyIyKBhw7dTWjXZIzqmpzO2lBkyWr4hlImQgpu1m1pei3UnkFRWw=="],

"@tanstack/router-utils": ["@tanstack/router-utils@1.133.19", "", { "dependencies": { "@babel/core": "^7.27.4", "@babel/generator": "^7.27.5", "@babel/parser": "^7.27.5", "@babel/preset-t

packages/app/package.json

+1−0

@@ -54,6 +54,7 @@

"@solid-primitives/websocket": "1.3.1",

"@solidjs/meta": "catalog:",

"@solidjs/router": "catalog:",

"@tanstack/solid-query": "5.91.4",

"@thisbeyond/solid-dnd": "0.7.5",

"diff": "catalog:",

"effect": "catalog:",

packages/app/src/app.tsx

+13−5

@@ -9,6 +9,7 @@ import { Splash } from "@opencode-ai/ui/logo"

import { ThemeProvider } from "@opencode-ai/ui/theme"

import { MetaProvider } from "@solidjs/meta"

import { type BaseRouterProps, Navigate, Route, Router } from "@solidjs/router"

import { QueryClient, QueryClientProvider } from "@tanstack/solid-query"

import { type Duration, Effect } from "effect"

import {

type Component,

@@ -81,6 +82,11 @@ function MarkedProviderWithNativeParser(props: ParentProps) {

return <MarkedProvider nativeParser={platform.parseMarkdown}>{props.children}</MarkedProvider>

}

function QueryProvider(props: ParentProps) {

const client = new QueryClient()

return <QueryClientProvider client={client}>{props.children}</QueryClientProvider>

}

function AppShellProviders(props: ParentProps) {

return (

@@ -136,11 +142,13 @@ export function AppBaseProviders(props: ParentProps) {

<FileComponentProvider component={File}>{props.chil

packages/app/src/components/dialog-connect-provider.tsx

+1−2

@@ -12,10 +12,9 @@ import { showToast } from "@opencode-ai/ui/toast"

import { createMemo, Match, onCleanup, onMount, Switch } from "solid-js"

import { createStore, produce } from "solid-js/store"

import { Link } from "@/components/link"

import { useLanguage } from "@/context/language"

import { useGlobalSDK } from "@/context/global-sdk"

import { useGlobalSync } from "@/context/global-sync"

import { DialogSelectModel } from "./dialog-select-model"

import { useLanguage } from "@/context/language"

import { DialogSelectProvider } from "./dialog-select-provider"

export function DialogConnectProvider(props: { provider: string }) {

packages/app/src/components/dialog-custom-provider-form.ts

+0−1

@@ -34,7 +34,6 @@ export type FormState = {

apiKey: string

models: ModelRow[]

headers: HeaderRow[]

saving: boolean

err: {

providerID?: string

name?: string

packages/app/src/components/dialog-custom-provider.test.ts

+0−2

@@ -16,7 +16,6 @@ describe("validateCustomProvider", () => {

{ row: "h0", key: " X-Test ", value: " enabled ", err: {} },

{ row: "h1", key: "", value: "", err: {} },

saving: false,

err: {},

@@ -60,7 +59,6 @@ describe("validateCustomProvider", () => {

{ row: "h0", key: "Authorization", value: "one", err: {} },

{ row: "h1", key: "authorization", value: "two", err: {} },

saving: false,

err: {},

packages/app/src/components/dialog-custom-provider.tsx

+35−37

@@ -3,6 +3,7 @@ import { useDialog } from "@opencode-ai/ui/context/dialog"

import { Dialog } from "@opencode-ai/ui/dialog"

import { IconButton } from "@opencode-ai/ui/icon-button"

import { ProviderIcon } from "@opencode-ai/ui/provider-icon"

import { useMutation } from "@tanstack/solid-query"

import { TextField } from "@opencode-ai/ui/text-field"

import { showToast } from "@opencode-ai/ui/toast"

import { batch, For } from "solid-js"

@@ -31,7 +32,6 @@ export function DialogCustomProvider(props: Props) {

apiKey: "",

models: [modelRow()],

headers: [headerRow()],

saving: false,

err: {},

})

@@ -116,48 +116,46 @@ export function DialogCustomProvider(props: Props) {

return output.result

}

const save = async (e: SubmitEvent) => {

e.preventDefault()

if (form.saving) return

const result = validate()

if (!result) return

const saveMutation = useMutation(() => ({

mutationFn: async (result: NonNullable<ReturnType<typeof validate>>) => {

const disabledProviders = globalSync.data.config.disabled_providers ?? []

const nextDisabled = disabledProviders.filter((id) => id !== result.providerID)

setForm("

packages/app/src/components/dialog-edit-project.tsx

+29−30

@@ -2,6 +2,7 @@ import { Button } from "@opencode-ai/ui/button"

import { useDialog } from "@opencode-ai/ui/context/dialog"

import { Dialog } from "@opencode-ai/ui/dialog"

import { TextField } from "@opencode-ai/ui/text-field"

import { useMutation } from "@tanstack/solid-query"

import { Icon } from "@opencode-ai/ui/icon"

import { createMemo, For, Show } from "solid-js"

import { createStore } from "solid-js/store"

@@ -28,7 +29,6 @@ export function DialogEditProject(props: { project: LocalProject }) {

color: props.project.icon?.color || "pink",

iconUrl: props.project.icon?.override || "",

startup: props.project.commands?.start ?? "",

saving: false,

dragOver: false,

iconHover: false,

})

@@ -71,38 +71,37 @@ export function DialogEditProject(props: { project: LocalProject }) {

setStore("iconUrl", "")

}

async function handleSubmit(e: SubmitEvent) {

e.preventDefault()

await Promise.resolve()

.then(async () => {

setStore("saving", true)

const name = store.name.trim() === folderName() ? "" : store.name.trim()

const start = store.startup.trim()

const saveMutation = useMutation(() => ({

packages/app/src/components/dialog-select-mcp.tsx

+17−13

@@ -1,4 +1,5 @@

import { Component, createMemo, createSignal, Show } from "solid-js"

import { useMutation } from "@tanstack/solid-query"

import { Component, createMemo, Show } from "solid-js"

import { useSync } from "@/context/sync"

import { useSDK } from "@/context/sdk"

import { Dialog } from "@opencode-ai/ui/dialog"

@@ -17,18 +18,15 @@ export const DialogSelectMcp: Component = () => {

const sync = useSync()

const sdk = useSDK()

const language = useLanguage()

const [loading, setLoading] = createSignal<string | null>(null)

const items = createMemo(() =>

Object.entries(sync.data.mcp ?? {})

.map(([name, status]) => ({ name, status: status.status }))

.sort((a, b) => a.name.localeCompare(b.name)),

)

const toggle = async (name: string) => {

if (loading()) return

setLoading(name)

try {

const toggle = useMutation(() => ({

mutationFn: async (name: string) => {

const status = sync.data.mcp[name]

if (status?.status === "connected") {

await sdk.client.mcp.disconnect({ name })

@@ -38,10 +36,8 @@ export const DialogSelectMcp: Component = () => {

const result = await sdk.client.mcp.status()

packages/app/src/components/dialog-select-server.tsx

+85−88

@@ -6,6 +6,7 @@ import { Icon } from "@opencode-ai/ui/icon"

import { IconButton } from "@opencode-ai/ui/icon-button"

import { List } from "@opencode-ai/ui/list"

import { TextField } from "@opencode-ai/ui/text-field"

import { useMutation } from "@tanstack/solid-query"

import { showToast } from "@opencode-ai/ui/toast"

import { useNavigate } from "@solidjs/router"

import { createEffect, createMemo, createResource, onCleanup, Show } from "solid-js"

@@ -186,7 +187,6 @@ export function DialogSelectServer() {

name: "",

username: DEFAULT_USERNAME,

password: "",

adding: false,

error: "",

showForm: false,

status: undefined as boolean | undefined,

@@ -198,7 +198,6 @@ export function DialogSelectServer() {

username: "",

password: "",

error: "",

busy: false,

status: undefined as boolean | undefined,

})

@@ -209,7 +208,6 @@ export function DialogSelectServer() {

name: "",

username: DEFAULT_USERNAME,

password: "",

adding: false,

error: "",

showForm: false,

status: undefined,

@@ -224,10 +222,78 @@ export function DialogSelectServer() {

passwor

packages/app/src/components/status-popover.tsx

+27−31

@@ -4,6 +4,7 @@ import { Icon } from "@opencode-ai/ui/icon"

import { Popover } from "@opencode-ai/ui/popover"

import { Switch } from "@opencode-ai/ui/switch"

import { Tabs } from "@opencode-ai/ui/tabs"

import { useMutation } from "@tanstack/solid-query"

import { showToast } from "@opencode-ai/ui/toast"

import { useNavigate } from "@solidjs/router"

import { type Accessor, createEffect, createMemo, createSignal, For, type JSXElement, onCleanup, Show } from "solid-js"

@@ -130,41 +131,30 @@ const useDefaultServerKey = (

}

const useMcpToggle = (input: {

sync: ReturnType<typeof useSync>

sdk: ReturnType<typeof useSDK>

language: ReturnType<typeof useLanguage>

}) => {

const [loading, setLoading] = createSignal<string | null>(null)

const toggle = async (name: string) => {

if (loading()) return

setLoading(name)

const useMcpToggleMutation = () => {

const sync = useSync()

const sdk = useSDK()

const language = useLanguage()

try {

const status = input.sync.data.mcp[name]

await (status?.status === "connected"

? input.sdk.client.mcp.disconnect({ name })

: input.sdk.client.mcp.connect({ name }))

const

packages/app/src/pages/session.tsx

+130−122

@@ -1,5 +1,6 @@

import type { Project, UserMessage } from "@opencode-ai/sdk/v2"

import { useDialog } from "@opencode-ai/ui/context/dialog"

import { useMutation } from "@tanstack/solid-query"

import {

batch,

onCleanup,

@@ -327,10 +328,7 @@ export default function Page() {

})

const [ui, setUi] = createStore({

git: false,

pendingMessage: undefined as string | undefined,

restoring: undefined as string | undefined,

reverting: false,

reviewSnap: false,

scrollGesture: 0,

scroll: {

@@ -506,7 +504,6 @@ export default function Page() {

const [followup, setFollowup] = createStore({

items: {} as Record<string, (FollowupDraft & { id: string })[] | undefined>,

sending: {} as Record<string, string | undefined>,

failed: {} as Record<string, string | undefined>,

paused: {} as Record<string, boolean | undefined>,

edit: {} as Record<

@@ -644,25 +641,24 @@ export default function Page() {

globalSync.set("project", [...list, next])

}

function initGit() {

if (ui.git) return

setUi("git", true)

void sdk.client.project

.initGit()

.then((x) => {

if (!x.data) return

packages/app/src/pages/session/composer/session-question-dock.tsx

+44−40

@@ -1,5 +1,6 @@

import { For, Show, createMemo, onCleanup, onMount, type Component } from "solid-js"

import { createStore } from "solid-js/store"

import { useMutation } from "@tanstack/solid-query"

import { Button } from "@opencode-ai/ui/button"

import { DockPrompt } from "@opencode-ai/ui/dock-prompt"

import { Icon } from "@opencode-ai/ui/icon"

@@ -24,7 +25,6 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit

custom: cached?.custom ?? ([] as string[]),

customOn: cached?.customOn ?? ([] as boolean[]),

editing: false,

sending: false,

})

let root: HTMLDivElement | undefined

@@ -126,36 +126,40 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit

showToast({ title: language.t("common.requestFailed"), description: message })

}

const reply = async (answers: QuestionAnswer[]) => {

if (store.sending) return

props.onSubmit()

setStore("sending", true)

try {

await sdk.client.question.reply({ requestID: props.request.id, answers })

const replyMutation = useMutation(() => ({

mutationFn: (answers: QuestionAnswer[]) => sdk.client.question.reply({ reque

packages/app/src/pages/session/message-timeline.tsx

+60−64

@@ -1,6 +1,7 @@

import { For, createEffect, createMemo, on, onCleanup, Show, Index, type JSX } from "solid-js"

import { createStore, produce } from "solid-js/store"

import { useNavigate } from "@solidjs/router"

import { useMutation } from "@tanstack/solid-query"

import { Button } from "@opencode-ai/ui/button"

import { FileIcon } from "@opencode-ai/ui/file-icon"

import { Icon } from "@opencode-ai/ui/icon"

@@ -321,7 +322,6 @@ export function MessageTimeline(props: {

const [title, setTitle] = createStore({

draft: "",

editing: false,

saving: false,

menuOpen: false,

pendingRename: false,

pendingShare: false,

@@ -335,38 +335,6 @@ export function MessageTimeline(props: {

let more: HTMLButtonElement | undefined

const [req, setReq] = createStore({ share: false, unshare: false })

const shareSession = () => {

const id = sessionID()

if (!id || req.share) return

if (!shareEnabled()) return

setReq("share", true)

globalSDK.client.session

.share({ sessionID: id, directory: sdk.directory })

.catch((err: unknown) => {

console.error("Failed to share session", err)

})

.finally(() => {