Conversation
…eact Suspense and ErrorBoundary support Co-authored-by: einari <134365+einari@users.noreply.github.com>
|
@copilot The proxies generated should have a ‘useSuspense()’ static method on them as well, that forwards to these new hooks |
|
@copilot add Storybook stories that showcases these capabilities - create a query that overrides the query provider and simulates delay. In the stories, add a button for re-running the queries |
…ates Co-authored-by: einari <134365+einari@users.noreply.github.com>
Done in 2efa3ae. Both Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
…vableQuery Co-authored-by: einari <134365+einari@users.noreply.github.com>
Done in 701e4c7. Two story files were added under
Both stories use Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
|
@copilot Add documentation for the new suspense hooks and also for the proxy hooks as well |
…eQuery hooks Co-authored-by: einari <134365+einari@users.noreply.github.com>
Done in af131c9. The following documentation was added/updated:
|
|
@copilot We've now fixed what we needed to fix in Chronicle and upgraded to the latest version in Arc. What I don't see now, is how we can really hook this up in Arc now. Are we missing something vital to be able to do this? |
…pense integration Co-authored-by: einari <134365+einari@users.noreply.github.com>
The vital missing piece was that Arc had no
<QueryErrorBoundary
onError={({ isQueryUnauthorized, error, reset }) =>
isQueryUnauthorized
? <p>Not authorized. <button onClick={reset}>Retry</button></p>
: <p>{error.message} <button onClick={reset}>Retry</button></p>
}
>
<Suspense fallback={<Spinner />}>
<ItemList />
</Suspense>
</QueryErrorBoundary>
<QueryBoundary
loadingFallback={<Spinner />}
onError={({ isQueryUnauthorized, reset }) => ...}
>
<ItemList />
</QueryBoundary>Both are exported from Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
|
NuGet packages for this PR, e.g. Cratis.Arc: |
Adds Suspense-compatible variants of the existing query hooks, enabling components to leverage React's
<Suspense>boundaries for loading states andQueryErrorBoundary/QueryBoundaryfor error handling. Generated proxy classes also exposeuseSuspense()static methods for a consistent API.Added
useSuspenseQuery/useSuspenseQueryWithPaging— suspends the component while the HTTP query is in-flight; throwsQueryFailedorQueryUnauthorizedon failure so aQueryErrorBoundarycan catch themuseSuspenseObservableQuery/useSuspenseObservableQueryWithPaging— suspends until the first WebSocket message arrives, then streams updates reactively viauseState; same error propagationQueryFailed— error type carryingexceptionMessagesandexceptionStackTracefrom server-side exceptionsQueryUnauthorized— error type for unauthorized responsesQueryErrorBoundary— class-based ReactErrorBoundarythat catchesQueryFailedandQueryUnauthorized; exposes anonErrorrender-prop receiving a typedQueryErrorInfoobject (error,isQueryFailed,isQueryUnauthorized,reset)QueryBoundary— convenience wrapper combining<Suspense>andQueryErrorBoundaryin a single component; acceptsloadingFallbackfor the loading stateclearSuspenseQueryCache()/clearSuspenseObservableQueryCache()— cache invalidation helpers intended for test teardownuseSuspense()/useSuspenseWithPaging()static methods on all generated query proxies (bothQuery.hbsandObservableQuery.hbstemplates), forwarding to the new hooksuseSuspenseQuery(stories/queries/SuspenseQuery.stories.tsx) with four scenarios: happy path (loading → data table with re-run button), server exception (QueryFailedcaught byQueryErrorBoundary), unauthorized (QueryUnauthorizedcaught byQueryErrorBoundary), and QueryBoundary combined usageuseSuspenseObservableQuery(stories/queries/SuspenseObservableQuery.stories.tsx) with two scenarios: streaming updates (auto-updates every 2 s with inject-event and re-run buttons), and server exception (QueryFailedcaught byQueryErrorBoundary)Documentation/frontend/react/suspense-queries.md— full reference documentation covering how Suspense hooks work,QueryErrorBoundaryandQueryBoundarycomponents with prop tables, all four hook signatures and return values,QueryFailed/QueryUnauthorizederror type tables, proxy static methods, a complete end-to-end example withQueryBoundary, a comparison table vs. the standard hooks, and cache/re-fetching guidance including test teardownChanged
queries/index.ts— re-exports the four new hooks, the two error types,QueryErrorBoundary,QueryBoundary, andQueryErrorInfoQuery.hbsproxy template — updated imports and addeduseSuspense()/useSuspenseWithPaging()static methodsObservableQuery.hbsproxy template — updated imports and addeduseSuspense()/useSuspenseWithPaging()static methodsDocumentation/frontend/react/queries.md— updated introduction to reference Suspense hooks and added a "Suspense-Compatible Hooks" section linking to the new documentation pageDocumentation/frontend/react/proxy-generation.md— added "Suspense Hooks on Proxies" subsection under Queries showinguseSuspense()andQueryBoundaryusageDocumentation/frontend/react/toc.yml— added "Suspense Queries" navigation entry between Queries and Proxy GenerationFixed
useRef,useMemo,useState) on every Suspense retry for uncommitted components. The hooks use a module-level cache keyed on query class + config + args so the pending Promise and resolved result survive across retries without triggering an infinite fetch loop.Original prompt
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.