diff --git a/src/use-query.spec.ts b/src/use-query.spec.ts index c62f1a4..0fb2fcc 100644 --- a/src/use-query.spec.ts +++ b/src/use-query.spec.ts @@ -567,6 +567,45 @@ describe('useQuery', () => { }) expect(cache.getQueryData(['id'])).toBe(42) }) + + it('uses the placeholderData immediately after changing the key', async () => { + const key = ref(1) + const placeholderData = { data: 'ok' } + const { wrapper } = mountSimple({ + key: () => [key.value], + query: async () => ({ data: 'done' }), + placeholderData, + }) + + await flushPromises() + + key.value++ + await nextTick() + expect(wrapper.vm.data).toBe(placeholderData) + await flushPromises() + expect(wrapper.vm.data).not.toBe(placeholderData) + key.value++ + expect(wrapper.vm.data).toBe(placeholderData) + }) + + // NOTE: same as above but added for regression testing + // https://github.com/posva/pinia-colada/issues/154 + it('uses the placeholderData even if the query is invalidated after after changing the key', async () => { + const key = ref(1) + const placeholderData = { data: 'ok' } + const { wrapper } = mountSimple({ + key: () => ['common', key.value], + query: async () => ({ data: 'done' }), + placeholderData, + }) + const queryCache = useQueryCache() + + await flushPromises() + + key.value++ + queryCache.invalidateQueries({ key: ['common'] }) + expect(wrapper.vm.data).toBe(placeholderData) + }) }) describe('refresh data', () => { diff --git a/src/use-query.ts b/src/use-query.ts index 41721f9..2a66f8d 100644 --- a/src/use-query.ts +++ b/src/use-query.ts @@ -268,7 +268,11 @@ export function useQuery< if (toValue(enabled)) refresh() }, - { immediate: true }, + { + immediate: true, + // We need to set the placeholderData immediately to avoid an undefined value + flush: 'sync', + }, ) // avoid adding a watcher if enabled cannot change