vishalbalaji / trpc-svelte-query-adapter

A simple adapter to use `@tanstack/svelte-query` with trpc, similar to `@trpc/react-query`.
71 stars 6 forks source link

Incorrect opts types on many functions #27

Closed CoopTRUE closed 6 months ago

CoopTRUE commented 6 months ago

When using .createQuery, .createInfiniteQuery, and every other function that takes opts?:, the queryKey is always required

For example this has no type errors:

const search = trpc($page).search.text.createQuery({ text: input.trim() })

But this has an error:

// Property 'queryKey' is missing in type '{ enabled: boolean; }' but required in type ...
const search = trpc($page).search.text.createQuery({ text: input.trim() }, { enabled: input.trim().length > 0 })

In the dist, queryKey is always overridden so there is no reason why queryKey should even be available

image

My suggestion is adding Partial<> to each of the opts?: however you know more than me if this is a good idea image image

vishalbalaji commented 6 months ago

@CoopTRUE I am not able to re-produce this issue on my end.

2024-02-18_16:50:32_scrot

queryKey and queryFn are not required properties even if you use createQuery straight from @tanstack/svelte-query, so I don't really see why this is happening.

Is this happening with the latest release? This might be an issue with a discrepancy with Tanstack query versions in the library's peer dependencies. Could you please share your package.json file here so that I can check?

CoopTRUE commented 6 months ago

Sure

  "dependencies": {
    "@auth/core": "^0.27.0",
    "@auth/drizzle-adapter": "^0.7.0",
    "@auth/sveltekit": "^0.13.0",
    "@faker-js/faker": "^8.4.1",
    "@sveltejs/adapter-node": "^4.0.1",
    "@sveltejs/enhanced-img": "^0.1.8",
    "@sveltejs/kit": "^2.5.0",
    "@sveltejs/vite-plugin-svelte": "^3.0.2",
    "@tanstack/svelte-query": "^5.21.7",
    "@tanstack/svelte-query-devtools": "^5.21.7",
    "@trpc/client": "^10.45.1",
    "@trpc/server": "^10.45.1",
    "autoprefixer": "^10.4.17",
    "bits-ui": "^0.18.1",
    "clsx": "^2.1.0",
    "cmdk-sv": "^0.0.13",
    "debounce": "^2.0.0",
    "drizzle-orm": "^0.29.3",
    "lucide-svelte": "^0.331.0",
    "nanoid": "^5.0.5",
    "nprogress": "^0.2.0",
    "postcss": "^8.4.35",
    "postgres": "^3.4.3",
    "superjson": "^2.2.1",
    "svelte": "^4.2.11",
    "svelte-inview": "^4.0.2",
    "tailwind-merge": "^2.2.1",
    "tailwind-variants": "^0.2.0",
    "tailwindcss": "^3.4.1",
    "trpc-svelte-query-adapter": "^2.2.3",
    "trpc-sveltekit": "^3.5.26",
    "vite": "^5.1.3",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@total-typescript/ts-reset": "^0.5.1",
    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
    "@types/eslint": "^8.56.2",
    "@types/nprogress": "^0.2.3",
    "@typescript-eslint/eslint-plugin": "^6.21.0",
    "@typescript-eslint/parser": "^6.21.0",
    "dotenv": "^16.4.4",
    "drizzle-kit": "^0.20.14",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-drizzle": "^0.2.3",
    "eslint-plugin-svelte": "^2.35.1",
    "eslint-plugin-tailwindcss": "^3.14.2",
    "pg": "^8.11.3",
    "prettier": "^3.2.5",
    "prettier-plugin-svelte": "^3.2.1",
    "prettier-plugin-tailwindcss": "^0.5.11",
    "svelte-check": "^3.6.4",
    "tslib": "^2.6.2",
    "typescript": "^5.3.3"
  }

I recently ran pnpm up -L to update all these packages so this is the latest version for all of them

CoopTRUE commented 6 months ago

From what I can find, queryKey is required in createQuery() if you pass the options object image

If you backtrack the types far enough in createQuery, you'll see that it is a required type in the interface image

vishalbalaji commented 6 months ago

Hey, thanks a lot for pointing this out! Turns out that this was indeed due to a very recent update to the svelte-query types about 2 days ago: https://github.com/TanStack/query/commit/61f4d747883ce67cf4edcc65f9a7693fa2bc7b6a.

The fix for this should be available in v2.2.4.