diff --git a/packages/tanstack-react-query/README.md b/packages/tanstack-react-query/README.md index f7003630..919cc9e4 100644 --- a/packages/tanstack-react-query/README.md +++ b/packages/tanstack-react-query/README.md @@ -158,3 +158,42 @@ export const TodoListDisplay = () => { ); }; ``` + +### Drizzle Support + +[Drizzle queries](https://github.com/powersync-ja/powersync-js/tree/main/packages/drizzle-driver) can be used with the `useQuery` and `useSuspenseQuery` hooks by converting them to a compilable query using the `toCompilableQuery` utility from `@powersync/drizzle-driver`. + +```TSX +// TodoListDisplay.tsx +import { useQuery } from '@powersync/tanstack-react-query'; +import { toCompilableQuery } from '@powersync/drizzle-driver'; + +export const TodoListDisplay = () => { + const drizzleQuery = drizzleDb.select().from(lists); + + const { data: todoLists, isLoading, error } = useQuery({ + queryKey: ['todoLists'], + query: toCompilableQuery(drizzleQuery), // The type of the rows in `data` are inferred from the Drizzle query + }); + + if (isLoading) { + return