T
TanStack•2mo ago
reduced-jade

basic vue-db setup typescript issue

Hello there, I'm just trying to get a very basic setup to play nice with typescript. this is the script part of a vue SFC: 
<script setup lang="ts">
import { api } from '@renderer/api'
import { QueryClient } from '@tanstack/query-core'
import { createCollection } from '@tanstack/vue-db'
import { queryCollectionOptions } from '@tanstack/query-db-collection'


const queryClient = new QueryClient()

const umsaetze = createCollection(
  queryCollectionOptions({
    queryKey: ['umsaetze'],
    queryFn: () => api.getHibiscusUmsaetze(),
    queryClient,
    //getKey: (item) => item.id
  })
)
</script>
<script setup lang="ts">
import { api } from '@renderer/api'
import { QueryClient } from '@tanstack/query-core'
import { createCollection } from '@tanstack/vue-db'
import { queryCollectionOptions } from '@tanstack/query-db-collection'


const queryClient = new QueryClient()

const umsaetze = createCollection(
  queryCollectionOptions({
    queryKey: ['umsaetze'],
    queryFn: () => api.getHibiscusUmsaetze(),
    queryClient,
    //getKey: (item) => item.id
  })
)
</script>
I get 
No overload matches this call.
The last overload gave the following error.
No overload matches this call.
The last overload gave the following error.
see the screenshot below. relevant dependencies: 
    "@tanstack/query-core": "^5.90.2",
    "@tanstack/query-db-collection": "^0.2.25",
    "@tanstack/vue-db": "^0.0.59",
    "@tanstack/vue-query": "^5.90.1",
    "@tanstack/query-core": "^5.90.2",
    "@tanstack/query-db-collection": "^0.2.25",
    "@tanstack/vue-db": "^0.0.59",
    "@tanstack/vue-query": "^5.90.1",
devdependencies: 
    "typescript": "^5.9.2",
    "vite": "^7.0.5",
    "vue": "^3.5.17",
    "vue-eslint-parser": "^10.2.0",
    "vue-tsc": "^3.0.3"
    "typescript": "^5.9.2",
    "vite": "^7.0.5",
    "vue": "^3.5.17",
    "vue-eslint-parser": "^10.2.0",
    "vue-tsc": "^3.0.3"
No description
8 Replies
absent-sapphire
absent-sapphire•2mo ago
Have you checked out the tests? For some sample usages
reduced-jade
reduced-jadeOP•2mo ago
@Kyle Mathews do you mean these? https://tanstack.com/query/v4/docs/framework/react/guides/testing because I can only find them for react, not vue
Testing | TanStack Query React Docs
React Query works by means of hooks either the ones we offer or custom ones that wrap around them. With React 17 or earlier, writing unit tests for these custom hooks can be done by means of the libra...
absent-sapphire
absent-sapphire•2mo ago
reduced-jade
reduced-jadeOP•2mo ago
thanks you! I just copied the required files into my project, viewing them in webstorm - and it seems there are no real errors (a few complaints about a persons veriable possibly being undefined at 3 places) but how does that help me further?
absent-sapphire
absent-sapphire•2mo ago
They're examples of how to use the Vue integration to check your code against
reduced-jade
reduced-jadeOP•2mo ago
@Kyle Mathews thank you for trying to help, but I dont understand how the example would help me. I've tried to read it a bit, but it seems confusing. - its quite a lot of code with lots of collections, but none appear to really cover my basic use. - theres 'custom' utils code defining this mock collection which i do not expect to have to write myself, if i want to use query collection - they all use a strange mock collection and none of them use query collections which i would like to use: https://tanstack.com/db/latest/docs/collections/query-collection
Query Collection | TanStack DB Docs
Query Collection Query collections provide seamless integration between TanStack DB and TanStack Query, enabling automatic synchronization between your local database and remote data sources. Overview...
correct-apricot
correct-apricot•2mo ago
try reload ts server
reduced-jade
reduced-jadeOP•4w ago
yes sorry - I think the issue in fact was with webstorm, after switching ts engine and then it started working as expected.

Did you find this page helpful?