指定したidに該当するデータを取得するとき、TanStack QueryのuseQueryを書くとしたら、
const fetchData = (id: number) => { ... } const {data} = useQuery({ queryFn: () => fetchData(id) });
のようになるはず。
idがundefinedだったら?
idが number|undefined だとしたら、どう書くのがベストなのか?
// APIの引数をoptionalにするのはイケてない const fetchData = (id?: number) => { ... } const {data} = useQuery({ queryFn: () => { // nullをreturnするのも変な感じ if (typeof id === 'undefined') return null; return fetchData(id) }, enabled: typeof id !== 'undefined' });
queryFnが返す値を変えれば良さそう?
こちらの議論を見たところ、これが良さそう。
これなら fetchDataの引数の型を不自然にしなくても良いし、Typescriptのlintも通る。
const fetchData = (id: number) => { ... } const {data} = useQuery({ queryFn: () => typeof id !== 'undefined' ? undefined : fetchData(id), enabled: typeof id !== 'undefined', initialData: { hoge: 123} // デフォルト値を返すならinitialDataがあったほうが良いかも });