|
| 1 | +<script lang="ts"> |
| 2 | + import { createMutation, createQuery, hashKey, useQueryClient } from 'svelte-query/dev'; |
| 3 | + import { bookFilterStore } from './store.svelte'; |
| 4 | + import { unstate } from 'svelte'; |
| 5 | + let a = { a: 1 }; |
| 6 | + let b = ['cache update tester', bookFilterStore]; |
| 7 | +
|
| 8 | + const data = createQuery(() => { |
| 9 | + return { |
| 10 | + queryKey: b, |
| 11 | + queryFn: async () => { |
| 12 | + const s = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'].map((v) => { |
| 13 | + return { title: v }; |
| 14 | + }); |
| 15 | + if (Math.abs(bookFilterStore.paginate.page % 2) == 1) { |
| 16 | + return s.slice(0, 5); |
| 17 | + } |
| 18 | + return s.slice(5, 6); |
| 19 | + }, |
| 20 | + staleTime: 5000000 |
| 21 | + }; |
| 22 | + }); |
| 23 | + const client = useQueryClient(); |
| 24 | + const update = createMutation({ |
| 25 | + mutationFn: () => { |
| 26 | + return ['a new list of items', 'a']; |
| 27 | + }, |
| 28 | + onSuccess: (v) => { |
| 29 | + // console.log(hashKey(b.map((v) => unstate(v)))); |
| 30 | + // console.log(hashKey(b)); |
| 31 | + // console.log('test hash', hashKey(b) === hashKey(b.map((v) => unstate(v)))); |
| 32 | + const k = b.map((v) => unstate(v)); |
| 33 | + client.setQueryData(k, (v) => { |
| 34 | + debugger; |
| 35 | + v[0].title = 'faker'; |
| 36 | + return v; |
| 37 | + }); |
| 38 | + } |
| 39 | + }); |
| 40 | + /* const querycache = useQueryClient().getQueryCache(); |
| 41 | + $effect(() => { |
| 42 | + if (data.fetchStatus) { |
| 43 | + console.log(data.fetchStatus); |
| 44 | + } |
| 45 | + const ret = querycache.find({ queryKey: b, exact: false }); |
| 46 | + //console.log('find in query cache', ret); |
| 47 | + }); */ |
| 48 | +</script> |
| 49 | + |
| 50 | +<button |
| 51 | + onclick={() => { |
| 52 | + update.mutate(); |
| 53 | + }}>update cache</button |
| 54 | +> |
| 55 | + |
| 56 | +{data.fetchStatus} |
| 57 | +{data.isLoading} |
| 58 | +{data.isFetching} |
| 59 | +{data.isRefetching} |
| 60 | +<button |
| 61 | + onclick={() => { |
| 62 | + console.log('click +1'); |
| 63 | + bookFilterStore.paginate.page += 1; |
| 64 | + }}>next</button |
| 65 | +> |
| 66 | +<button |
| 67 | + onclick={() => { |
| 68 | + console.log('click -1'); |
| 69 | + bookFilterStore.paginate.page -= 1; |
| 70 | + }}>prev</button |
| 71 | +> |
| 72 | +{bookFilterStore.paginate.page} |
| 73 | +<pre>{JSON.stringify(data.data, null, 1)}</pre> |
| 74 | +{#each data?.data ?? [] as item} |
| 75 | + <div>{item.title}</div> |
| 76 | +{/each} |
0 commit comments