Compatibility with SPA frameworks
@powersync/react
package is best for most basic use cases, especially when you only need reactive queries with loading and error states.
@powersync/tanstack-react-query
package extends the useQuery
hook from @powersync/react
and adds functionality from TanStack Query, making it a better fit for advanced use cases or performance-optimized apps.
@powersync/vue
.
@powersync/react
package provides React hooks for use with the JavaScript Web SDK or React Native SDK. These hooks are designed to support reactivity, and can be used to automatically re-render React components when query results update or to access PowerSync connectivity status changes.
The main hooks available are:
useQuery
: This allows you to access the results of a watched query. The response includes isLoading
, isFetching
and error
properties.
useStatus
: Access the PowerSync connectivity status. This can be used to update the UI based on whether the client is connected or not.
useSuspenseQuery
: This hook also allows you to access the results of a watched query, but its loading and fetching states are handled through Suspense. It automatically converts certain loading/fetching states into Suspense signals, triggering Suspense boundaries in parent components.
@powersync/tanstack-react-query
package.
useQuery
and useSuspenseQuery
hooks, bringing many of TanStack’s advanced asynchronous state management features to PowerSync web and React Native applications, including:
useQuery
useSuspenseQuery
automatically converts certain loading states into Suspense signals, triggering Suspense boundaries in parent components.
useSuspenseQuery
, you can ensure that navigation from page A to page B only happens after the queries for page B have loaded. You can do this by combining useSuspenseQuery
with the <Suspense />
element and React Router’s v7_startTransition
future flag, which blocks navigation until all suspending components are ready.
powersync/vue
package is a Vue-specific wrapper for PowerSync. It provides Vue composables that are designed to support reactivity, and can be used to automatically re-render components when query results update or to access PowerSync connectivity status changes.
The main hooks available are:
useQuery
: This allows you to access the results of a watched query. The response includes isLoading
, isFetching
and error
properties.
useStatus
: Access the PowerSync connectivity status. This can be used to update the UI based on whether the client is connected or not.