refactor(app): load sync state through TanStack Query (#23792)

2026-04-28 12:24:30 +08:00 · 2026-04-28 12:24:30 +08:00 · c8d9f7aa89
commit c8d9f7aa89
parent cd7ec93cdf
7 changed files with 237 additions and 286 deletions
--- a/packages/app/src/context/global-sync/bootstrap.ts
+++ b/packages/app/src/context/global-sync/bootstrap.ts
@ -19,6 +19,7 @@ import type { State, VcsCache } from "./types"
 import { cmp, normalizeAgentList, normalizeProviderList } from "./utils"
 import { formatServerError } from "@/utils/server-errors"
 import { QueryClient, queryOptions, skipToken } from "@tanstack/solid-query"
+import { loadMcpQuery } from "../global-sync"

 type GlobalStore = {
  ready: boolean
@ -66,6 +67,62 @@ function runAll(list: Array<() => Promise<unknown>>) {
  return Promise.allSettled(list.map((item) => item()))
 }

+function showErrors(input: {
+  errors: unknown[]
+  title: string
+  translate: (key: string, vars?: Record<string, string | number>) => string
+  formatMoreCount: (count: number) => string
+}) {
+  if (input.errors.length === 0) return
+  const message = formatServerError(input.errors[0], input.translate)
+  const more = input.errors.length > 1 ? input.formatMoreCount(input.errors.length - 1) : ""
+  showToast({
+    variant: "error",
+    title: input.title,
+    description: message + more,
+  })
+}
+
+export const loadGlobalConfigQuery = (
+  sdk?: OpencodeClient,
+  transform?: (x: Awaited<ReturnType<OpencodeClient["global"]["config"]["get"]>>) => void,
+) =>
+  queryOptions({
+    queryKey: ["config"],
+    queryFn: sdk
+      ? () =>
+          retry(() =>
+            sdk.global.config.get().then((x) => {
+              transform?.(x)
+              return x.data!
+            }),
+          )
+      : skipToken,
+  })
+
+export const loadProjectsQuery = (
+  sdk?: OpencodeClient,
+  transform?: (x: Awaited<ReturnType<OpencodeClient["project"]["list"]>>["data"]) => void,
+) =>
+  queryOptions({
+    queryKey: ["project"],
+    queryFn: sdk
+      ? () =>
+          retry(() =>
+            sdk.project
+              .list()
+              .then((x) => {
+                return (x.data ?? [])
+                  .filter((p) => !!p?.id)
+                  .filter((p) => !!p.worktree && !p.worktree.includes("opencode-test"))
+                  .slice()
+                  .sort((a, b) => cmp(a.id, b.id))
+              })
+              .then(transform),
+          )
+      : skipToken,
+  })
+
 export async function bootstrapGlobal(input: {
  globalSDK: OpencodeClient
  requestFailedTitle: string
@ -74,53 +131,15 @@ export async function bootstrapGlobal(input: {
  setGlobalStore: SetStoreFunction<GlobalStore>
  queryClient: QueryClient
 }) {
-  const fast = [
-    () =>
-      retry(() =>
-        input.globalSDK.global.config.get().then((x) => {
-          input.setGlobalStore("config", reconcile(x.data!, { merge: false }))
-        }),
-      ),
-  ]
-
  const slow = [
+    () => input.queryClient.fetchQuery(loadGlobalConfigQuery(input.globalSDK)),
+    () => input.queryClient.fetchQuery(loadProvidersQuery(null, input.globalSDK)),
+    () => input.queryClient.fetchQuery(loadPathQuery(null, input.globalSDK)),
    () =>
-      input.queryClient.fetchQuery({
-        ...loadProvidersQuery(null),
-        queryFn: () =>
-          retry(() =>
-            input.globalSDK.provider.list().then((x) => {
-              input.setGlobalStore("provider", normalizeProviderList(x.data!))
-              return null
-            }),
-          ),
-      }),
-    () =>
-      retry(() =>
-        input.globalSDK.path.get().then((x) => {
-          input.setGlobalStore("path", x.data!)
-        }),
-      ),
-    () =>
-      retry(() =>
-        input.globalSDK.project.list().then((x) => {
-          const projects = (x.data ?? [])
-            .filter((p) => !!p?.id)
-            .filter((p) => !!p.worktree && !p.worktree.includes("opencode-test"))
-            .slice()
-            .sort((a, b) => cmp(a.id, b.id))
-          input.setGlobalStore("project", projects)
-        }),
+      input.queryClient.fetchQuery(
+        loadProjectsQuery(input.globalSDK, (data) => input.setGlobalStore("project", data ?? [])),
      ),
  ]
-  await runAll(fast)
-  // showErrors({
-  //   errors: errors(await runAll(fast)),
-  //   title: input.requestFailedTitle,
-  //   translate: input.translate,
-  //   formatMoreCount: input.formatMoreCount,
-  // })
-  await waitForPaint()
  await runAll(slow)
  // showErrors({
  //   errors: errors(),
@ -128,7 +147,6 @@ export async function bootstrapGlobal(input: {
  //   translate: input.translate,
  //   formatMoreCount: input.formatMoreCount,
  // })
-  input.setGlobalStore("ready", true)
 }

 function groupBySession<T extends { id: string; sessionID: string }>(input: T[]) {
@ -179,26 +197,28 @@ function warmSessions(input: {
  ).then(() => undefined)
 }

-export const loadProvidersQuery = (directory: string | null) =>
-  queryOptions<null>({ queryKey: [directory, "providers"], queryFn: skipToken })
+export const loadProvidersQuery = (directory: string | null, sdk?: OpencodeClient) =>
+  queryOptions({
+    queryKey: [directory, "providers"],
+    queryFn: sdk ? () => retry(() => sdk.provider.list().then((x) => normalizeProviderList(x.data!))) : skipToken,
+  })

 export const loadAgentsQuery = (
  directory: string | null,
  sdk?: OpencodeClient,
  transform?: (x: Awaited<ReturnType<OpencodeClient["app"]["agents"]>>) => void,
 ) =>
-  queryOptions<null>({
+  queryOptions({
    queryKey: [directory, "agents"],
-    queryFn:
-      sdk && transform
-        ? () =>
-            retry(() =>
-              sdk.app
-                .agents()
-                .then(transform)
-                .then(() => null),
-            )
-        : skipToken,
+    queryFn: sdk
+      ? () =>
+          retry(() =>
+            sdk.app.agents().then((x) => {
+              transform?.(x)
+              return x.data!
+            }),
+          )
+      : skipToken,
  })

 export const loadPathQuery = (
@ -208,16 +228,15 @@ export const loadPathQuery = (
 ) =>
  queryOptions<Path>({
    queryKey: [directory, "path"],
-    queryFn:
-      sdk && transform
-        ? () =>
-            retry(() =>
-              sdk.path.get().then(async (x) => {
-                transform(x)
-                return x.data!
-              }),
-            )
-        : skipToken,
+    queryFn: sdk
+      ? () =>
+          retry(() =>
+            sdk.path.get().then(async (x) => {
+              transform?.(x)
+              return x.data!
+            }),
+          )
+      : skipToken,
  })

 export async function bootstrapDirectory(input: {
@ -247,13 +266,6 @@ export async function bootstrapDirectory(input: {
  if (Object.keys(input.store.config).length === 0 && Object.keys(input.global.config).length > 0) {
    input.setStore("config", reconcile(input.global.config, { merge: false }))
  }
-  if (loading || input.store.provider.all.length === 0) {
-    input.setStore("provider_ready", false)
-  }
-  input.setStore("mcp_ready", false)
-  input.setStore("mcp", {})
-  input.setStore("lsp_ready", false)
-  input.setStore("lsp", [])
  if (loading) input.setStore("status", "partial")

  const rev = (providerRev.get(input.directory) ?? 0) + 1
@ -340,33 +352,15 @@ export async function bootstrapDirectory(input: {
          }),
        ),
      () => Promise.resolve(input.loadSessions(input.directory)),
+      () => input.queryClient.fetchQuery(loadMcpQuery(input.directory, input.sdk)),
      () =>
-        retry(() =>
-          input.sdk.mcp.status().then((x) => {
-            input.setStore("mcp", x.data!)
-            input.setStore("mcp_ready", true)
-          }),
-        ),
-      () =>
-        input.queryClient.ensureQueryData({
-          ...loadProvidersQuery(input.directory),
-          queryFn: () =>
-            retry(() => input.sdk.provider.list())
-              .then((x) => {
-                if (providerRev.get(input.directory) !== rev) return
-                input.setStore("provider", normalizeProviderList(x.data!))
-                input.setStore("provider_ready", true)
-              })
-              .catch((err) => {
-                if (providerRev.get(input.directory) !== rev) console.error("Failed to refresh provider list", err)
-                const project = getFilename(input.directory)
-                showToast({
-                  variant: "error",
-                  title: input.translate("toast.project.reloadFailed.title", { project }),
-                  description: formatServerError(err, input.translate),
-                })
-              })
-              .then(() => null),
+        input.queryClient.fetchQuery(loadProvidersQuery(input.directory, input.sdk)).catch((err) => {
+          const project = getFilename(input.directory)
+          showToast({
+            variant: "error",
+            title: input.translate("toast.project.reloadFailed.title", { project }),
+            description: formatServerError(err, input.translate),
+          })
        }),
    ].filter(Boolean) as (() => Promise<any>)[]

--- a/packages/app/src/context/global-sync/child-store.test.ts
+++ b/packages/app/src/context/global-sync/child-store.test.ts
@ -22,6 +22,7 @@ describe("createChildStoreManager", () => {
      onBootstrap() {},
      onDispose() {},
      translate: (key) => key,
+      getSdk: () => null!,
    })

    Array.from({ length: 30 }, (_, index) => `/pinned-${index}`).forEach((directory) => {
--- a/packages/app/src/context/global-sync/child-store.ts
+++ b/packages/app/src/context/global-sync/child-store.ts
@ -1,7 +1,7 @@
 import { createRoot, getOwner, onCleanup, runWithOwner, type Owner } from "solid-js"
 import { createStore, type SetStoreFunction, type Store } from "solid-js/store"
 import { Persist, persisted } from "@/utils/persist"
-import type { VcsInfo } from "@opencode-ai/sdk/v2/client"
+import type { OpencodeClient, VcsInfo } from "@opencode-ai/sdk/v2/client"
 import {
  DIR_IDLE_TTL_MS,
  MAX_DIR_STORES,
@ -14,8 +14,9 @@ import {
  type VcsCache,
 } from "./types"
 import { canDisposeDirectory, pickDirectoriesToEvict } from "./eviction"
-import { useQuery } from "@tanstack/solid-query"
-import { loadPathQuery } from "./bootstrap"
+import { useQueries } from "@tanstack/solid-query"
+import { loadPathQuery, loadProvidersQuery } from "./bootstrap"
+import { loadLspQuery, loadMcpQuery } from "../global-sync"

 export function createChildStoreManager(input: {
  owner: Owner
@ -24,6 +25,7 @@ export function createChildStoreManager(input: {
  onBootstrap: (directory: string) => void
  onDispose: (directory: string) => void
  translate: (key: string, vars?: Record<string, string | number>) => string
+  getSdk: (directory: string) => OpencodeClient
 }) {
  const children: Record<string, [Store<State>, SetStoreFunction<State>]> = {}
  const vcsCache = new Map<string, VcsCache>()
@ -156,14 +158,27 @@ export function createChildStoreManager(input: {

      const init = () =>
        createRoot((dispose) => {
+          const sdk = input.getSdk(directory)
+
+          const initialMeta = meta[0].value
          const initialIcon = icon[0].value

-          const pathQuery = useQuery(() => loadPathQuery(directory))
+          const [pathQuery, mcpQuery, lspQuery, providerQuery] = useQueries(() => ({
+            queries: [
+              loadPathQuery(directory, sdk),
+              loadMcpQuery(directory, sdk),
+              loadLspQuery(directory, sdk),
+              loadProvidersQuery(directory, sdk),
+            ],
+          }))
+
          const child = createStore<State>({
            project: "",
-            projectMeta: undefined,
+            projectMeta: initialMeta,
            icon: initialIcon,
-            provider_ready: false,
+            get provider_ready() {
+              return providerQuery.isLoading
+            },
            provider: { all: [], connected: [], default: {} },
            config: {},
            get path() {
@ -181,10 +196,18 @@ export function createChildStoreManager(input: {
            todo: {},
            permission: {},
            question: {},
-            mcp_ready: false,
-            mcp: {},
-            lsp_ready: false,
-            lsp: [],
+            get mcp_ready() {
+              return mcpQuery.isLoading
+            },
+            get mcp() {
+              return mcpQuery.isLoading ? {} : (mcpQuery.data ?? {})
+            },
+            get lsp_ready() {
+              return lspQuery.isLoading
+            },
+            get lsp() {
+              return lspQuery.isLoading ? [] : (lspQuery.data ?? [])
+            },
            vcs: vcsStore.value,
            limit: 5,
            message: {},
@ -207,6 +230,11 @@ export function createChildStoreManager(input: {
            child[1]("vcs", (value) => value ?? cached)
          })

+          onPersistedInit(meta[2], () => {
+            if (child[0].projectMeta !== initialMeta) return
+            child[1]("projectMeta", meta[0].value)
+          })
+
          onPersistedInit(icon[2], () => {
            if (child[0].icon !== initialIcon) return
            child[1]("icon", icon[0].value)