Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 40 additions & 2 deletions src/query.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ 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'
import { VueView, vueViewFactory } from './view'

async function setupTestEnvironment() {
const schema = createSchema({
Expand Down Expand Up @@ -80,8 +80,12 @@ describe('useQuery', () => {
z.close()
})

it('useQuery with ttl', async () => {
it('useQuery with ttl (zero@0.18)', async () => {
const { z, tableQuery } = await setupTestEnvironment()
if (!('updateTTL' in tableQuery)) {
// 0.19 removed updateTTL from the query
return
}
const ttl = ref<TTL>('1m')

const materializeSpy = vi.spyOn(tableQuery, 'materialize')
Expand All @@ -107,6 +111,40 @@ describe('useQuery', () => {
z.close()
})

it('useQuery with ttl (zero@0.19)', async () => {
const { z, tableQuery } = await setupTestEnvironment()
if ('updateTTL' in tableQuery) {
// 0.19 removed updateTTL from the query
return
}

const ttl = ref<TTL>('1m')

const materializeSpy = vi.spyOn(tableQuery, 'materialize')

const queryGetter = vi.fn(() => tableQuery)

useQuery(queryGetter, () => ({ ttl: ttl.value }))
expect(queryGetter).toHaveBeenCalledTimes(1)
expect(materializeSpy).toHaveBeenCalledExactlyOnceWith(
vueViewFactory,
'1m',
)
expect(materializeSpy).toHaveLastReturnedWith(expect.any(VueView))
const view: VueView<unknown> = materializeSpy.mock.results[0]!.value
const updateTTLSpy = vi.spyOn(view, 'updateTTL')

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()

Expand Down
2 changes: 1 addition & 1 deletion src/query.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export function useQuery<
)

watch(ttl, (ttl) => {
toValue(query).updateTTL(ttl)
toValue(view)?.updateTTL(ttl)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can just do this:

Suggested change
toValue(view)?.updateTTL(ttl)
view.value?.updateTTL(ttl)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems the same to me but I'm not sure what is preferred in vue code?

})

if (getCurrentInstance()) {
Expand Down
1 change: 1 addition & 0 deletions src/view.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1254,6 +1254,7 @@ describe('vueView', () => {
{ singular: false, relationships: {} },
() => {},
queryCompleteResolver.promise,
() => {},
)
})

Expand Down
19 changes: 18 additions & 1 deletion src/view.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import type {
Query,
ResultType,
Schema,
TTL,
ViewFactory,
} from '@rocicorp/zero'
import { applyChange } from '@rocicorp/zero'
Expand All @@ -28,6 +29,7 @@ export class VueView<V> implements Output {
readonly #input: Input
readonly #format: Format
readonly #onDestroy: () => void
readonly #updateTTL: (ttl: TTL) => void

#state: State

Expand All @@ -37,10 +39,12 @@ export class VueView<V> implements Output {
format: Format = { singular: false, relationships: {} },
onDestroy: () => void = () => {},
queryComplete: true | Promise<true>,
updateTTL: (ttl: TTL) => void,
) {
this.#input = input
this.#format = format
this.#onDestroy = onDestroy
this.#updateTTL = updateTTL
this.#state = reactive([
{ '': format.singular ? undefined : [] },
queryComplete === true ? complete : unknown,
Expand Down Expand Up @@ -83,26 +87,39 @@ export class VueView<V> implements Output {
push(change: Change): void {
this.#applyChange(change)
}

updateTTL(ttl: TTL): void {
this.#updateTTL(ttl)
}
}

export function vueViewFactory<
TSchema extends Schema,
TTable extends keyof TSchema['tables'] & string,
TReturn,
>(
_query: Query<TSchema, TTable, TReturn>,
query: Query<TSchema, TTable, TReturn>,
input: Input,
format: Format,
onDestroy: () => void,
onTransactionCommit: (cb: () => void) => void,
queryComplete: true | Promise<true>,
updateTTL?: (ttl: TTL) => void,
) {
interface UpdateTTL {
updateTTL: (ttl: TTL) => void
}
return new VueView<HumanReadable<TReturn>>(
input,
onTransactionCommit,
format,
onDestroy,
queryComplete,
// In zero@0.19 updateTTL is passed in to the view factory.
// In zero@0.18 it was a property on the query.
updateTTL ?? (ttl =>
(query as unknown as UpdateTTL).updateTTL(ttl)
),
)
}

Expand Down