matsutoba’s blog

フロントエンドエンジニアをしています

useQueryでidにundefinedを指定したときにデフォルト値を返すキレイな書き方は?

指定した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が返す値を変えれば良さそう?

github.com

こちらの議論を見たところ、これが良さそう。
これなら 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があったほうが良いかも
});