Migration: client.query -> defineQuery/observeQuery
把“定义缓存”和“订阅视图”分开:
- 缓存级:
defineQuery(key/queryFn/stale/retry/gc) - 观察者级:
observeQuery(enabled/select/placeholder/refetchOn*)
const user = client.query({ key: ['user', id], queryFn: ({ signal }) => fetchUser(id, signal),});
await user.fetch();const userQuery = client.defineQuery({ key: ['user', id], queryFn: ({ signal }) => fetchUser(id, signal),});
const userObserver = client.observeQuery({ query: userQuery, enabled: true, refetchOnMount: 'stale',});
await userQuery.fetch();批量操作迁移
Section titled “批量操作迁移”invalidateQueries:保留cancelQueries:保留removeQueries:保留- 新增:
refetchQueries、resetQueries、setQueriesData
SSR 迁移
Section titled “SSR 迁移”const dehydrated = client.dehydrate();client.hydrate(dehydrated);React 侧最小迁移
Section titled “React 侧最小迁移”useQuery 调用方式保持接近,但建议显式传 query 句柄以消除定义歧义:
const userQuery = client.defineQuery({ key: ['user', id], queryFn: ({ signal }) => fetchUser(id, signal),});
const user = useQuery({ client, query: userQuery, select: (value) => value,});