Theo's Typesafe CultTTC
Theo's Typesafe Cult•2y ago•
3 replies
Xaohs

App directory fetch data from endpoint with query parameters

Hi, i'm dipping my toes into the app directory for NextJS and I can't seem to get this working. Essentially, i'd like to fetch some data from my API endpoint applying some conditions to them from my Search Parameters. What is a common pattern to do this?
Currently I have my 
page.tsx
: 
export default async function Page() {
  const params = useParams();
  const { data } = await api.data.getData.query({
     condition1: params.condition1
  });

  return (
       ....
  );
}


Which nets me with the beautiful error of: 
Unhandled Runtime Error

Error: useParams only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component
Was this page helpful?