🐱
[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();
}
以上。
Discussion