// $with: !tailwind
import styles from "./index.module.css";
// $end: !tailwind
import { type NextPage } from "next";
import Head from "next/head";
// $with: extBackend
import { useQuery } from "@tanstack/react-query";
// $end: extBackend
// $with: recoil && !carbon
import useCounter from "~/atoms/useCounter";
// $end: recoil && !carbon
// $with: trpc
import { api } from "~/utils/api";
// $end: trpc
const Home: NextPage = () => {
// $with: recoil && !carbon
const [counter] = useCounter();
// $end: recoil && !carbon
// $with: trpc
const { data, isLoading } = api.example.hello.useQuery({ text: "from tRPC" });
// $end: trpc
// $with: extBackend
const fetchMessage = async () => {
const res = await fetch("/api/example/hello");
const data = await res.json();
return data as { message: string };
};
const { data, isLoading } = useQuery({ queryKey: ["message"], queryFn: fetchMessage});
// $end: extBackend
return (
<>
CEN - [project-name]
CEN - [project-name]
{/* $with: trpc || extBackend */}
{/* $with: trpc */}
{isLoading ? "Loading tRPC query..." : data?.greeting}
{/* $end: trpc */}
{/* $with: extBackend */}
{isLoading ? "Loading query" : data?.message}
{/* $end: extBackend */}
{/* $end: trpc || extBackend */}
{/* $with: recoil && !carbon */}
counter: {counter}
{/* $end: recoil && !carbon */}
);
};
export default Home;