From 6e7653565232f7de357de6ea475eee279f81858e Mon Sep 17 00:00:00 2001
From: Yahya JIRARI <whygee.dev@gmail.com>
Date: Sat, 7 Jun 2025 18:03:26 +0200
Subject: [PATCH] docs(tanstack-react-query): document Drizzle ORM support via
 toCompilableQuery

---
 packages/tanstack-react-query/README.md | 39 +++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/packages/tanstack-react-query/README.md b/packages/tanstack-react-query/README.md
index f7003630e..919cc9e40 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 <div>Loading todo lists...</div>;
+  }
+
+  if (error) {
+    return <div>Error loading todo lists: {error.message}</div>;
+  }
+
+  return (
+    <ul>
+      {todoLists?.map((list) => (
+        <li key={list.id}>{list.name}</li>
+      ))}
+    </ul>
+  );
+};
+```
+
+The `toCompilableQuery` function wraps your Drizzle query to make it compatible with useQuery and useSuspenseQuery.
+
+For more information on using Drizzle with PowerSync, see the [Drizzle Driver documentation](https://github.com/powersync-ja/powersync-js/tree/main/packages/drizzle-driver).