[TanStack Query] カスタムフックでundefinedを返さない

概要

TanStack Queryでundefinedで返さないようにしたい。
reactのコードで記載する

コード

//hooks/todos.ts
type Todo = {
    id: number
    name: string
}

const fetchTodos = async ():Todo[] => {
  const res = await fetch('http://localhost:3000/todos');
  return res.json();
};


export const useFetchTodos = ():Todo[] => {
  const { data: todos } = useQuery(['todos'], fetchTodos);
  //以下のようにするか、todosに変換を加えたければ。todos?.map((todo)=>{{id: todo.id, name: todo.name + "をする"}}) みたいにオプショナルチュイニングを使えば良い
  return todos ?? []
  
}

//もしくはLoadingなどが欲しければ以下のようにobjectで返せば良い。
export const useFetchTodos = () => {
  const { data: todos, } = useQuery(['todos'], fetchTodos);
  return {data: todos ?? [], isLoading:isLoading}
}


//pages/todos.tsx
const todos = () =>{
    //必ずリスト型でreturnされる。
    const todoRows = useFetchTodos();
}

以上。