Slug page cant useQuery and make it cleint side so that i can also use mutation

[winter cradle]

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

[dense trellis]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[fast fractal]

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

[winter cradle]

fix this by importing api from import { api } from "@/trpc/react";
instead of
import { api } from "@/trpc/server";

[dense trellis]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1179397116779565110 message)