reactQuery_3.js

import { useQuery } from 'react-query';

export const useFetchFirstTodo = () => {
  const { data, error, isLoading } = useQuery("fetchFirstTodo", fetchFirstTodo);
  // -> dispatch and action
  // -> manipulate the response before sending back to component
  // -> call another api
  // -> whatever makes sense for you to put here...
  return { data, error, isLoading }
}

const Todo = () => {
  const { data, error, isLoading } = useFetchFirstTodo();
  
  if (error) {
    return `Error: ${error} `;
  }

  if (isLoading) {
    return "Loading...";
  }

  if (data) {
    const { title, completed } = data;
    return `${title} is ${!completed && "not "} completed`;
  }

  return null;
};