Slug page cant useQuery and make it cleint side so that i can also use mutation
Answered
American Crocodile posted this in #help-forum
American CrocodileOP
import { usePathname } from "next/navigation";
import ProfileCard from "../_components/docEmailForm";
import EmailForm from "../_components/clientDocCard";
import { api } from "@/trpc/server";
export default async function Page() {
const docId = usePathname();
const doc = await api.doc.hello.query({ text: docId });
return (
<main className="flex min-h-screen flex-col items-center bg-gradient-to-b from-white to-gray-300 text-gray-800">
<h1 className="mt-8 text-5xl font-extrabold tracking-tight sm:text-[5rem]">
Elite <span className="text-[hsl(0,100%,50%)]">Financial</span>
</h1>
<p className="my-1 mb-3 w-[30rem] text-center text-lg">
Pleas sign at earliest convience. This will insure you maintain your
coverage incase of emergency{" "}
</p>
<div className="flex flex-grow flex-col items-center justify-center gap-12 px-4 pb-32">
{doc && <ProfileCard doc={doc} />}
{/* <EmailForm docId={docId} /> */}
</div>
</main>
);
}
I want to also use a mutation cant get it to work says this error
You're importing a component that needs next/headers. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.
Learn more: https://nextjs.org/docs/getting-started/react-essentials
how can i query and use mutation and use slug on same page
import ProfileCard from "../_components/docEmailForm";
import EmailForm from "../_components/clientDocCard";
import { api } from "@/trpc/server";
export default async function Page() {
const docId = usePathname();
const doc = await api.doc.hello.query({ text: docId });
return (
<main className="flex min-h-screen flex-col items-center bg-gradient-to-b from-white to-gray-300 text-gray-800">
<h1 className="mt-8 text-5xl font-extrabold tracking-tight sm:text-[5rem]">
Elite <span className="text-[hsl(0,100%,50%)]">Financial</span>
</h1>
<p className="my-1 mb-3 w-[30rem] text-center text-lg">
Pleas sign at earliest convience. This will insure you maintain your
coverage incase of emergency{" "}
</p>
<div className="flex flex-grow flex-col items-center justify-center gap-12 px-4 pb-32">
{doc && <ProfileCard doc={doc} />}
{/* <EmailForm docId={docId} /> */}
</div>
</main>
);
}
I want to also use a mutation cant get it to work says this error
You're importing a component that needs next/headers. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.
Learn more: https://nextjs.org/docs/getting-started/react-essentials
how can i query and use mutation and use slug on same page
Answered by B33fb0n3
yea, the headers can only be used inside server side stuff. So either remove all the import stuff for the headers or make your component serverside
3 Replies
yea, the headers can only be used inside server side stuff. So either remove all the import stuff for the headers or make your component serverside
Answer
American CrocodileOP
fix this by importing api from import { api } from "@/trpc/react";
instead of
import { api } from "@/trpc/server";
instead of
import { api } from "@/trpc/server";
perfect, good job! ðŸ‘