feat: upgrade to zero v0.18 (danielroe#52)

Author: markusgeert

package.json

@@ -35,10 +35,11 @@
     "vue": "^3.5.13"
   },
   "dependencies": {
-    "@rocicorp/zero": "^0.17.0"
+    "@rocicorp/zero": "^0.18.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "latest",
+    "@rocicorp/resolver": "^1.0.2",
     "@vitest/coverage-v8": "latest",
     "bumpp": "latest",
     "changelogithub": "13.13.0",

playground/src/db/schema.ts

@@ -55,7 +55,7 @@ const messageRelationships = relationships(message, ({ one }) => ({
   }),
 }))
 
-export const schema = createSchema(1, {
+export const schema = createSchema({
   tables: [user, medium, message],
   relationships: [messageRelationships],
 })

pnpm-lock.yaml

@@ -1 +1 @@
-export { useQuery } from './query'
+export { useQuery, type UseQueryOptions } from './query'

src/index.ts

@@ -0,0 +1,222 @@
+import type { TTL } from '@rocicorp/zero'
+import { createSchema, number, string, table, Zero } from '@rocicorp/zero'
+import { describe, expect, it, vi } from 'vitest'
+import { ref, watchEffect } from 'vue'
+import { useQuery } from './query'
+import { vueViewFactory } from './view'
+
+async function setupTestEnvironment() {
+  const schema = createSchema({
+    tables: [
+      table('table')
+        .columns({
+          a: number(),
+          b: string(),
+        })
+        .primaryKey('a'),
+    ],
+  })
+
+  const z = new Zero({
+    userID: 'asdf',
+    server: null,
+    schema,
+    // This is often easier to develop with if you're frequently changing
+    // the schema. Switch to 'idb' for local-persistence.
+    kvStore: 'mem',
+  })
+
+  await z.mutate.table.insert({ a: 1, b: 'a' })
+  await z.mutate.table.insert({ a: 2, b: 'b' })
+
+  const tableQuery = z.query.table
+
+  return { z, tableQuery }
+}
+
+describe('useQuery', () => {
+  it('useQuery', async () => {
+    const { z, tableQuery } = await setupTestEnvironment()
+
+    const { data: rows, status } = useQuery(() => tableQuery)
+    expect(rows.value).toMatchInlineSnapshot(`[
+  {
+    "a": 1,
+    "b": "a",
+    Symbol(rc): 1,
+  },
+  {
+    "a": 2,
+    "b": "b",
+    Symbol(rc): 1,
+  },
+]`)
+    expect(status.value).toEqual('unknown')
+
+    await z.mutate.table.insert({ a: 3, b: 'c' })
+    await 1
+
+    expect(rows.value).toMatchInlineSnapshot(`[
+  {
+    "a": 1,
+    "b": "a",
+    Symbol(rc): 1,
+  },
+  {
+    "a": 2,
+    "b": "b",
+    Symbol(rc): 1,
+  },
+  {
+    "a": 3,
+    "b": "c",
+    Symbol(rc): 1,
+  },
+]`)
+
+    // TODO: this is not working at the moment, possibly because we don't have a server connection in test
+    // expect(resultType.value).toEqual("complete");
+
+    z.close()
+  })
+
+  it('useQuery with ttl', async () => {
+    const { z, tableQuery } = await setupTestEnvironment()
+    const ttl = ref<TTL>('1m')
+
+    const materializeSpy = vi.spyOn(tableQuery, 'materialize')
+    const updateTTLSpy = vi.spyOn(tableQuery, 'updateTTL')
+    const queryGetter = vi.fn(() => tableQuery)
+
+    useQuery(queryGetter, () => ({ ttl: ttl.value }))
+
+    expect(queryGetter).toHaveBeenCalledTimes(1)
+    expect(updateTTLSpy).toHaveBeenCalledTimes(0)
+    expect(materializeSpy).toHaveBeenCalledExactlyOnceWith(
+      vueViewFactory,
+      '1m',
+    )
+    materializeSpy.mockClear()
+
+    ttl.value = '10m'
+    await 1
+
+    expect(materializeSpy).toHaveBeenCalledTimes(0)
+    expect(updateTTLSpy).toHaveBeenCalledExactlyOnceWith('10m')
+
+    z.close()
+  })
+
+  it('useQuery deps change', async () => {
+    const { z, tableQuery } = await setupTestEnvironment()
+
+    const a = ref(1)
+
+    const { data: rows, status } = useQuery(() =>
+      tableQuery.where('a', a.value),
+    )
+
+    const rowLog: unknown[] = []
+    const resultDetailsLog: unknown[] = []
+    const resetLogs = () => {
+      rowLog.length = 0
+      resultDetailsLog.length = 0
+    }
+
+    watchEffect(() => {
+      rowLog.push(rows.value)
+    })
+
+    watchEffect(() => {
+      resultDetailsLog.push(status.value)
+    })
+
+    expect(rowLog).toMatchInlineSnapshot(`[
+  [
+    {
+      "a": 1,
+      "b": "a",
+      Symbol(rc): 1,
+    },
+  ],
+]`)
+    // expect(resultDetailsLog).toEqual(["unknown"]);
+    resetLogs()
+
+    expect(rowLog).toEqual([])
+    // expect(resultDetailsLog).toEqual(["complete"]);
+    resetLogs()
+
+    a.value = 2
+    await 1
+
+    expect(rowLog).toMatchInlineSnapshot(`[
+  [
+    {
+      "a": 2,
+      "b": "b",
+      Symbol(rc): 1,
+    },
+  ],
+]`)
+    // expect(resultDetailsLog).toEqual(["unknown"]);
+    resetLogs()
+
+    expect(rowLog).toEqual([])
+    // expect(resultDetailsLog).toEqual(["complete"]);
+
+    z.close()
+  })
+
+  it('useQuery deps change watchEffect', async () => {
+    const { z, tableQuery } = await setupTestEnvironment()
+    const a = ref(1)
+    const { data: rows } = useQuery(() => tableQuery.where('a', a.value))
+
+    let run = 0
+
+    await new Promise((resolve) => {
+      watchEffect(() => {
+        if (run === 0) {
+          expect(rows.value).toMatchInlineSnapshot(
+            `[
+  {
+    "a": 1,
+    "b": "a",
+    Symbol(rc): 1,
+  },
+]`,
+          )
+          z.mutate.table.update({ a: 1, b: 'a2' })
+        }
+        else if (run === 1) {
+          expect(rows.value).toMatchInlineSnapshot(
+            `[
+  {
+    "a": 1,
+    "b": "a2",
+    Symbol(rc): 1,
+  },
+]`,
+          )
+          a.value = 2
+        }
+        else if (run === 2) {
+          expect(rows.value).toMatchInlineSnapshot(
+            `[
+  {
+    "a": 2,
+    "b": "b",
+    Symbol(rc): 1,
+  },
+]`,
+          )
+          resolve(true)
+        }
+        run++
+      })
+    })
+
+    z.close()
+  })
+})

src/query.test.ts

@@ -1,12 +1,24 @@
 // based on https://github.com/rocicorp/mono/tree/main/packages/zero-solid
 
-import type { ResultType, Schema } from '@rocicorp/zero'
-import type { AdvancedQuery, HumanReadable, Query } from '@rocicorp/zero/advanced'
+import type { HumanReadable, Query, ResultType, Schema, TTL } from '@rocicorp/zero'
 import type { ComputedRef, MaybeRefOrGetter } from 'vue'
+import type { VueView } from './view'
 
-import { computed, getCurrentInstance, isRef, onUnmounted, shallowRef, toValue, watch } from 'vue'
+import { DEFAULT_TTL } from '@rocicorp/zero'
+import {
+  computed,
+  getCurrentInstance,
+  onUnmounted,
+  shallowRef,
+  toValue,
+  watch,
+} from 'vue'
 import { vueViewFactory } from './view'
 
+export interface UseQueryOptions {
+  ttl?: TTL | undefined
+}
+
 interface QueryResult<TReturn> {
   data: ComputedRef<HumanReadable<TReturn>>
   status: ComputedRef<ResultType>
@@ -16,23 +28,34 @@ export function useQuery<
   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) || typeof _query === 'function') {
-    watch(_query, (query) => {
-      view.value.destroy()
-      view.value = (query as AdvancedQuery<TSchema, TTable, TReturn>).materialize(vueViewFactory)
-    })
-  }
+>(
+  query: MaybeRefOrGetter<Query<TSchema, TTable, TReturn>>,
+  options?: MaybeRefOrGetter<UseQueryOptions>,
+): QueryResult<TReturn> {
+  const ttl = computed(() => {
+    return toValue(options)?.ttl ?? DEFAULT_TTL
+  })
+  const view = shallowRef<VueView<HumanReadable<TReturn>> | null>(null)
+
+  watch(
+    () => toValue(query),
+    (q) => {
+      view.value?.destroy()
+      view.value = q.materialize(vueViewFactory, ttl.value)
+    },
+    { immediate: true },
+  )
+
+  watch(ttl, (ttl) => {
+    toValue(query).updateTTL(ttl)
+  })
 
   if (getCurrentInstance()) {
-    onUnmounted(() => view.value.destroy())
+    onUnmounted(() => view.value!.destroy())
   }
 
   return {
-    data: computed(() => view.value.data),
-    status: computed(() => view.value.status),
+    data: computed(() => view.value!.data),
+    status: computed(() => view.value!.status),
   }
 }