feat: added watch() to Drizzle and Kysely integrations

[Chriztiaan]

This PR improves support for watched queries with Drizzle and Kysely by adding a dedicated watch() implementation to each package.

The original report problem showed a limitation with using Drizzle's toSQL() helper with relational queries which you needed to use Powersync's watch function:

const query = dbWithDrizzle.query.companyTable.findMany({ with: { headquarter: true } })
const resultOnce = await query
console.log(resultOnce) // ✅ this creates an object

powerSyncDb.watch(
  toCompilableQuery(query).compile().sql,
  toCompilableQuery(query).compile().parameters as any[],
  { onResult: (result) => console.log('resultWatched', result.rows?._array) }, // 🤔 this creates an array instead of an object
)

Output:

 Working with direct execute/useQuery [
  {
    "headquarter": {
      "id": "d3415320-dae7-402f-928b-672110800e5c",
      "name": "Bachusstr.",
      "radius": 200
    },
    "id": "7d5a56d3-57cf-43a7-ac2c-4bab54c0631a",
    "name": "Zeitn GmbH"
  }
]
 LOG  resultWatched - broken - array of values [
  {
    "headquarter": "[\"d3415320-dae7-402f-928b-672110800e5c\",\"Bachusstr.\",200,null]",
    "id": "7d5a56d3-57cf-43a7-ac2c-4bab54c0631a",
    "name": "Zeitn GmbH"
  }
]

This is because with some relational queries toSQL() invocations will return a query that contains select json_array for the joined values - which Drizzle would map internally.

The solution is to call execute() on the queries directly instead of mapping the queries with toSQL().

[changeset-bot]

🦋 Changeset detected

Latest commit: d6d9c10

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages

Name	Type
@powersync/drizzle-driver	Minor
@powersync/kysely-driver	Minor
@powersync/common	Minor
@powersync/op-sqlite	Patch
@powersync/react-native	Patch
@powersync/tanstack-react-query	Patch
@powersync/web	Patch
@powersync/diagnostics-app	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[rkistner]

We had a similar issue with Kysely and useQuery hooks a while back:
#295

There, the issue was solved by using query.execute() instead of db.getAll(sql).
Since the Drizzle implementation also exposes a similar execute() method, I assume this issue is specific to db.watch(), and it already works correctly with useQuery? Could we do something to let the standard watch methods also accept compiled queries, which will solve the problem for Kysely as well, instead of adding a drizzle-specific watch method?

[Chriztiaan]

We had a similar issue with Kysely and useQuery hooks a while back: #295

There, the issue was solved by using query.execute() instead of db.getAll(sql). Since the Drizzle implementation also exposes a similar execute() method, I assume this issue is specific to db.watch(), and it already works correctly with useQuery? Could we do something to let the standard watch methods also accept compiled queries, which will solve the problem for Kysely as well, instead of adding a drizzle-specific watch method?

I agree with this to some extent @rkistner. Solving this problem in a way that also improves watch support in Kysely would be great. However we already overloading the watch() signature which was manageable since the first 2 parameters were always sql and params and this would become messy if we introduced a single query parameter to that mix. Another point is that using powersync.watch() alongside your DrizzleDb or KyselyDb instance is not that ergonomic, it means an additional import across your project instead of just being able to conveniently call drizzleDb.watch() or kyselyDb.watch().

---

As a possible compromise, could we consider a central watch function implementation (also in common as a util perhaps) that takes in a compilable query. This would then be wrapped for both the Drizzle and Kysely integrations.

If we still prefer to have this watch signature on the AbstractPowerSyncDatabase API, I would prefer if we had it under a different name (but that might make the API become even more confusing).

[rkistner]

Ok, that makes sense. Happy to go with this approach for now and then potentially re-evaluate later.

[Chriztiaan]

FYI @stevensJourney @rkistner:
I have added a compilableQueryWatch() to @powersync/common which is wrapped by both Drizzle and Kysely. I also added watch tests to both the ORM packages to show that it works as expected.