Skip to content

tanstack-react-query README: Kysley -> Kysely and formatting #374

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 30, 2024
Merged

tanstack-react-query README: Kysley -> Kysely and formatting #374

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions packages/tanstack-react-query/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# TanStack Query Integration for PowerSync

`@powersync/tanstack-react-query` provides seamless integration between PowerSync's Web SDK and [TanStack Query](https://tanstack.com/query/latest/docs/framework/react/overview) for React. It wraps TanStack's `useQuery` and `useSuspenseQuery` hooks to work easily with PowerSync's SQL queries. This combines PowerSync's existing watched queries with TanStack's features like the [paginated queries](https://tanstack.com/query/latest/docs/framework/react/guides/paginated-queries), [caching](https://tanstack.com/query/latest/docs/framework/react/guides/caching), and [Suspense](https://tanstack.com/query/latest/docs/framework/react/guides/suspense).
`@powersync/tanstack-react-query` provides seamless integration between PowerSync's Web SDK and [TanStack Query](https://tanstack.com/query/latest/docs/framework/react/overview) for React. It wraps TanStack's `useQuery` and `useSuspenseQuery` hooks to work easily with PowerSync's SQL queries. This combines PowerSync's existing watched queries with TanStack Query's features like the [paginated queries](https://tanstack.com/query/latest/docs/framework/react/guides/paginated-queries), [caching](https://tanstack.com/query/latest/docs/framework/react/guides/caching), and [Suspense](https://tanstack.com/query/latest/docs/framework/react/guides/suspense).

## Note: Alpha Release

This package is currently in an alpha release.

## Getting started
## Getting Started

To use `@powersync/tanstack-react-query`, you need to set up both the `PowerSync context` and the `TanStack React Query client` in your application.
To use `@powersync/tanstack-react-query`, you need to set up both the `PowerSyncContext` and the TanStack `QueryClientProvider` in your application.

```JSX
// App.jsx
Expand All @@ -22,7 +22,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

export const App = () => {
const powerSync = React.useMemo(() => {
// Setup PowerSync client
// Set up PowerSync client
}, [])
const queryClient = React.useMemo(() => new QueryClient(), [])

Expand All @@ -40,7 +40,7 @@ export const App = () => {

### useQuery

The `useQuery` hook from `@powersync/tanstack-react-query` works similarly to the standard `TanStack React Query` `useQuery` hook but integrates with PowerSync for watched query functionality. Queries automatically update when dependent tables change.
The `useQuery` hook from `@powersync/tanstack-react-query` works similarly to the standard TanStack React Query `useQuery` hook but integrates with PowerSync for watched query functionality. Queries automatically update when dependent tables change.

```JSX
// TodoListDisplay.jsx
Expand Down Expand Up @@ -127,7 +127,7 @@ return <></>
}
```

### Kysley Support
### Kysely Support

You are also able to use a compilable query (e.g. [Kysely queries](https://github.com/powersync-ja/powersync-js/tree/main/packages/kysely-driver)) as a query argument in place of a SQL statement string.

Expand Down
Loading