How to retrieve query params in a layout.tsx file

Answered

British Shorthair posted this in #help-forum

British ShorthairOP

2024-01-21T15:52:21.000Z

First of all, here's my current app dir structure

app
|__ (jobs)
   |__ layout.tsx
   |__ jobs/
      |__ layout.tsx
      |__ page.tsx
      |__ [id]/
          |__ page.tsx

The jobs group has a layout that has a top bar that contains a filter input and inside the jobs folder, I have another layout where I am fetching all the jobs that need to be filtered based on the criteria that were set through the prior layout.

In the app/(jobs)/layout.tsx file, I have a layout that contains a filter input that mutates the query parameters in the /jobs route path. Such as /jobs?category=full_time&salary=50+ or /jobs/[jobId]?category=full_time&salary=50+

To filter out jobs, I must access those query params in the app/(jobs)/jobs/layout.tsx file.

I tried adding an api call to a route handler to the layout file but got this error:

Error: connect ECONNREFUSED ::1:80
jobseeker:dev:     at RedirectableRequest.emit (node:events:514:28)
jobseeker:dev:     at ClientRequest.emit (node:events:514:28)
jobseeker:dev:     at Socket.socketErrorListener (node:_http_client:501:9)
jobseeker:dev:     at Socket.emit (node:events:514:28)
jobseeker:dev: digest: "505303072"

Is this the way to go to implement this feature? Please help me out with clarity and guidance.

Please feel free to ask questions for more context. Thanks!

Answered by Ray

you could use parallel route for the sidebar

View full answer

23 Replies

Ray

2024-01-21T15:55:43.000Z

layout.tsx does not receive searchParams. Could you fetch the data in page.tsx instead?

British ShorthairOP

2024-01-21T15:59:42.000Z

I need it in the layout.tsx file

Because the sidebar will show all the jobs that will stick beside (/jobs/layout.tsx) the job details page (/jobs/[id])

Ray

2024-01-21T16:01:50.000Z

you could use parallel route for the sidebar

Answer

British ShorthairOP

2024-01-21T16:03:20.000Z

How would the folder structure look like in that case?

Ray

2024-01-21T16:03:36.000Z

where is your sidebar render?

British ShorthairOP

2024-01-21T16:04:14.000Z

Inside the (jobs)/jobs/layout.tsx

Ray

2024-01-21T16:04:38.000Z

create it in (jobs)/jobs/@sidebar/default.tsx

it will receive searchParams

British ShorthairOP

2024-01-21T16:05:01.000Z

Interesting

Trying it

Ray

2024-01-21T16:05:37.000Z

// (jobs)/jobs/layout.tsx
export default function Layout({children, sidebar}) {
  return (
    {sidebar}
    {children}
  )
}

then render it in the layout.tsx

British ShorthairOP

2024-01-21T16:11:37.000Z

// (jobs)\jobs\@sidebar\default.tsx
import JobsList from "@/components/jobs/List.server";

export default function JobsListSideBar() {
  return (
    <div>
      <JobsList />
    </div>
  );
}

// (jobs)\jobs\layout.tsx
export default async function JobsRootPageLayout(
  props: AppProps & { sidebar: ReactNode },
) {
  const { children, sidebar } = props;

  console.log({ sidebar, children });
  return (
    <div className="flex h-full w-full items-center justify-center">
      <aside className="flex h-full w-full max-w-[350px] flex-col border-r bg-white">
        <div className="h-full w-full overflow-x-hidden">{sidebar}</div>
        <div className="h-full w-full flex-1 overflow-x-hidden p-4">
          {children}
        </div>
      </div>
  );
}