Todo.jsx

// in the component use it just like this
const { isLoading, isError, data } = useGetTodoById(id)

TodoService.jsx

const useGetTodoById = (id) => {
  const { isLoading, isError, data } = useQuery(
    ["todo/detail", id],
    () => {
      return axios.get(`http://localhost:4000/todo/detail/:${id}`);
    },
    {
      enabled: !!id,
      retry: 1,
      onSuccess: () => {
        // invalidate some query
      },
      onError: () => {
        // do something else
      },
    }
  );
  export { isLoading, isError, data };
};