Theo's Typesafe Cult•11mo ago

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 (
       ....
  );
}

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

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

2 Replies

KCIBUR•11mo ago

Hi! @Xaohs 1. You can get params directly from page props for example Page({ params}) and get rid of useParams hook in this server component. 2. Hooks can be used only in client components because they often use useState,useEffect which is not allowed in server components. You can try it , and if you still have questions, I will be happy to answer them to the best of my ability.

XaohsOP•11mo ago

Hi there! Yeah I see that the server component itself includes those params as props, so that works. I guess this would be the pattern to follow then

Gaming

Programming

App directory fetch data from endpoint with query parameters