feat!: upgrade to zero v0.12 and expose query status (#24)

BREAKING CHANGES: query details are now exposed via `data` and `status` properties returned from `useQuery`

Author: Gerbuuun

README.md

@@ -31,7 +31,7 @@ const z = new Zero({
   kvStore: 'mem',
 })
 
-const users = useQuery(z.query.user)
+const { data: users } = useQuery(z.query.user)
 ```
 
 > [!TIP]

package.json

@@ -35,7 +35,7 @@
     "vue": "^3.5.13"
   },
   "dependencies": {
-    "@rocicorp/zero": "^0.11.0"
+    "@rocicorp/zero": "^0.12.2025012600"
   },
   "devDependencies": {
     "@antfu/eslint-config": "latest",

playground/src/app.vue

@@ -25,15 +25,15 @@ const z = new Zero({
   kvStore: 'mem',
 })
 
-const users = useQuery(z.query.user)
-const mediums = useQuery(z.query.medium)
-const allMessages = useQuery(z.query.message)
+const { data: users } = useQuery(z.query.user)
+const { data: mediums } = useQuery(z.query.medium)
+const { data: allMessages } = useQuery(z.query.message)
 
 const filterUser = ref('')
 const filterText = ref('')
 const action = ref<'add' | 'remove' | undefined>(undefined)
 
-const filteredMessages = useQuery(() => {
+const { data: filteredMessages } = useQuery(() => {
   let filtered = z.query.message
     .related('medium', medium => medium.one())
     .related('sender', sender => sender.one())

playground/src/db/schema.ts

@@ -5,64 +5,65 @@
 // See https://github.com/rocicorp/mono/blob/main/apps/zbugs/src/domain/schema.ts
 // for more complex examples, including many-to-many.
 
-import type { ExpressionBuilder, Row, TableSchema } from '@rocicorp/zero'
-import { ANYONE_CAN, createSchema, createTableSchema, definePermissions, NOBODY_CAN } from '@rocicorp/zero'
+import type { ExpressionBuilder, Row } from '@rocicorp/zero'
+import {
+  ANYONE_CAN,
+  boolean,
+  createSchema,
+  definePermissions,
+  NOBODY_CAN,
+  number,
+  relationships,
+  string,
+  table,
+} from '@rocicorp/zero'
 
-const userSchema = createTableSchema({
-  tableName: 'user',
-  columns: {
-    id: 'string',
-    name: 'string',
-    partner: 'boolean',
-  },
-  primaryKey: 'id',
-})
+const user = table('user')
+  .columns({
+    id: string(),
+    name: string(),
+    partner: boolean(),
+  })
+  .primaryKey('id')
 
-const mediumSchema = createTableSchema({
-  tableName: 'medium',
-  columns: {
-    id: 'string',
-    name: 'string',
-  },
-  primaryKey: 'id',
-})
+const medium = table('medium')
+  .columns({
+    id: string(),
+    name: string(),
+  })
+  .primaryKey('id')
 
-const messageSchema = createTableSchema({
-  tableName: 'message',
-  columns: {
-    id: 'string',
-    senderID: 'string',
-    mediumID: 'string',
-    body: 'string',
-    timestamp: 'number',
-  },
-  primaryKey: 'id',
-  relationships: {
-    sender: {
-      sourceField: 'senderID',
-      destSchema: userSchema,
-      destField: 'id',
-    },
-    medium: {
-      sourceField: 'mediumID',
-      destSchema: mediumSchema,
-      destField: 'id',
-    },
-  },
-})
+const message = table('message')
+  .columns({
+    id: string(),
+    senderID: string(),
+    mediumID: string(),
+    body: string(),
+    timestamp: number(),
+  })
+  .primaryKey('id')
+
+const messageRelationships = relationships(message, ({ one }) => ({
+  sender: one({
+    sourceField: ['senderID'],
+    destField: ['id'],
+    destSchema: user,
+  }),
+  medium: one({
+    sourceField: ['mediumID'],
+    destField: ['id'],
+    destSchema: medium,
+  }),
+}))
 
-export const schema = createSchema({
-  version: 1,
-  tables: {
-    user: userSchema,
-    medium: mediumSchema,
-    message: messageSchema,
-  },
+export const schema = createSchema(1, {
+  tables: [user, medium, message],
+  relationships: [messageRelationships],
 })
 
 export type Schema = typeof schema
-export type Message = Row<typeof messageSchema>
-export type Medium = Row<typeof mediumSchema>
+export type Message = Row<typeof schema.tables.message>
+export type Medium = Row<typeof schema.tables.medium>
 export type User = Row<typeof schema.tables.user>
 
 // The contents of your decoded JWT.
@@ -73,12 +74,12 @@ interface AuthData {
 export const permissions = definePermissions<AuthData, Schema>(schema, () => {
   const allowIfLoggedIn = (
     authData: AuthData,
-    { cmpLit }: ExpressionBuilder<TableSchema>,
+    { cmpLit }: ExpressionBuilder<Schema, keyof Schema['tables']>,
   ) => cmpLit(authData.sub, 'IS NOT', null)
 
   const allowIfMessageSender = (
     authData: AuthData,
-    { cmp }: ExpressionBuilder<typeof messageSchema>,
+    { cmp }: ExpressionBuilder<Schema, 'message'>,
   ) => cmp('senderID', '=', authData.sub ?? '')
 
   return {

pnpm-lock.yaml

@@ -1,28 +1,38 @@
 // based on https://github.com/rocicorp/mono/tree/main/packages/zero-solid
 
-import type { AdvancedQuery, Query, QueryType, Smash, TableSchema } from '@rocicorp/zero/advanced'
+import type { ResultType, Schema } from '@rocicorp/zero'
+import type { AdvancedQuery, HumanReadable, Query } from '@rocicorp/zero/advanced'
 import type { ComputedRef, MaybeRefOrGetter } from 'vue'
-import { computed, getCurrentInstance, isRef, onUnmounted, shallowRef, toValue, watch } from 'vue'
 
+import { computed, getCurrentInstance, isRef, onUnmounted, shallowRef, toValue, watch } from 'vue'
 import { vueViewFactory } from './view'
 
+interface QueryResult<TReturn> {
+  data: ComputedRef<HumanReadable<TReturn>>
+  status: ComputedRef<ResultType>
+}
+
 export function useQuery<
-  TSchema extends TableSchema,
-  TReturn extends QueryType,
->(_query: MaybeRefOrGetter<Query<TSchema, TReturn>>): ComputedRef<Smash<TReturn>> {
-  const query = toValue(_query) as AdvancedQuery<TSchema, TReturn>
+  TSchema extends Schema,
+  TTable extends keyof TSchema['tables'] & string,
+  TReturn,
+>(_query: MaybeRefOrGetter<Query<TSchema, TTable, TReturn>>): QueryResult<TReturn> {
+  const query = toValue(_query) as AdvancedQuery<TSchema, TTable, TReturn>
   const view = shallowRef(query.materialize(vueViewFactory))
 
   if (isRef(_query) || _query instanceof Function) {
     watch(_query, (query) => {
       view.value.destroy()
-      view.value = (query as AdvancedQuery<TSchema, TReturn>).materialize(vueViewFactory)
+      view.value = (query as AdvancedQuery<TSchema, TTable, TReturn>).materialize(vueViewFactory)
     })
   }
 
   if (getCurrentInstance()) {
     onUnmounted(() => view.value.destroy())
   }
 
-  return computed(() => view.value.data)
+  return {
+    data: computed(() => view.value.data),
+    status: computed(() => view.value.status),
+  }
 }