Skip to content

Commit f36b590

Browse files
committed
docs: FAQ: [atomsWithQuery]: queryKey type is always unknown
1 parent 5997559 commit f36b590

File tree

2 files changed

+33
-2
lines changed

2 files changed

+33
-2
lines changed

README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
- [SSR Support](#ssr-support)
2121
- [Error Handling](#error-handling)
2222
- [Dev Tools](#devtools)
23+
- [FAQ](#faq)
2324
- [Migrate to v0.8.0](#migrate-to-v080)
2425

2526
### Support
@@ -479,6 +480,35 @@ export const Root = () => {
479480
}
480481
```
481482

483+
## FAQ
484+
485+
### `queryKey` type is always `unknown`?
486+
487+
Explicitly declare the `get:Getter` to get proper type inference for `queryKey`.
488+
489+
```tsx
490+
import { Getter } from 'jotai'
491+
import { atomWithQuery } from 'jotai-tanstack-query'
492+
493+
// ❌ Without explicit Getter type, queryKey type might be unknown
494+
const userAtom = atomWithQuery((get) => ({
495+
queryKey: ['users', get(idAtom).toString()],
496+
queryFn: async ({ queryKey: [, id] }) => {
497+
// typeof id = unknown
498+
},
499+
}))
500+
501+
// ✅ With explicit Getter type, queryKey gets proper type inference
502+
const userAtom = atomWithQuery((get: Getter) => ({
503+
queryKey: ['users', get(idAtom).toString()],
504+
queryFn: async ({ queryKey: [, id] }) => {
505+
// typeof id = string
506+
},
507+
}))
508+
```
509+
510+
This pattern applies to all atom functions that accept a getter parameter: `atomWithQuery`, `atomWithInfiniteQuery`, `atomWithSuspenseQuery`, `atomWithSuspenseInfiniteQuery`, and `atomWithMutationState`.
511+
482512
## Migrate to v0.8.0
483513

484514
### Change in atom signature

examples/01_query/src/App.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1+
import { Getter } from 'jotai'
12
import { useAtom } from 'jotai/react'
23
import { atom } from 'jotai/vanilla'
34
import { atomWithQuery } from 'jotai-tanstack-query'
45

56
const idAtom = atom(1)
67

7-
const userAtom = atomWithQuery((get) => ({
8-
queryKey: ['users', get(idAtom)],
8+
const userAtom = atomWithQuery((get: Getter) => ({
9+
queryKey: ['users', get(idAtom).toString()],
910
queryFn: async ({ queryKey: [, id] }) => {
1011
const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
1112
return res.json()

0 commit comments

Comments
 (0)