reactQuery_2.js

import { useQuery } from 'react-query';

const fetchFirstTodo = async () => {
  try {
    const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const json = await res.json();
    return json;
  } catch (err) {
    throw err;
  }
};

const Todo = () => {
  const { data, error, isLoading } = useQuery("fetchFirstTodo", fetchFirstTodo);
  
  useEffect(() => {
    // eventually dispatch redux action
    // if you need to store something
  }, [data]);

  if (error) {
    return `Error: ${error} `;
  }

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

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

  return null;
};