3 replies

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

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

TTC

Theo's Typesafe Cult•3y ago•

3 replies

Xaohs

App directory fetch data from endpoint with query parameters

page.tsx

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

App directory fetch data from endpoint with query parameters

Similar Threads

App directory fetch data from endpoint with query parameters

Similar Threads

Similar Threads

Similar Threads