Accessing Page Type Values in Layout

Developing with Prismic
1

Hello experts,

I would like to access Industry value which is present in page type from my layout.js file

Screenshot 2023-11-02 at 3.49.52 PM
Screenshot 2023-11-02 at 3.49.52 PM1992×794 42.1 KB

How to achieve this, really need some help on this

2

You can do that by following the docs and using getAllByType().

For example

import { createClient } from "@/prismicio";

export default async function Page() {
  const client = createClient();

  const page = await client.getAllByType("page");

  return <>....</>;
}
1 Like
3

Allow me to take it a little further @nathan (if you don't mind)

import { createClient } from "@/prismicio";

export default async function Page() {
  const client = createClient();

  const page = await client.getAllByType("page");
/*
*  Access the industry value by doing which of the below you prefer
*  const industry = page.data.industry;
*  const {data: { industry } } = page;
*/
  console.log('My industry value is ====> ', industry);

  return <>....</>;
}
4

I guess I need to communicate it in the better way.

Here is my page file (not only page but all page_type's will contain industry value)

export default async function Page({ params }) {
  const client = createClient();
  const page = await client
    .getByUID("product_pages", params.uid)
    .catch(() => notFound());
  return <SliceZone slices={page.data.slices} components={components} />;
}

export async function generateStaticParams() {
  const client = createClient();


  const pages = await client.getAllByType("product_pages");
  return pages.map((page) => {
    return { uid: page.uid };
  });
}

and I would like to get this value in the Header.js or Layout.js file because I need to show couple of new menu items based on this.

Tried to pass data like below. But its not working as expected (Its wrapping the layout twice)

export default async function Page({ params }) {
  const client = createClient();
  const page = await client
    .getByUID("product_pages", params.uid)
    .catch(() => notFound());
  return <RootLayout industry={page.data.industry}>
    <SliceZone slices={page.data.slices} components={components} />;
  </RootLayout>
}

I hope this will help you guys

6

The code example you show above looks like the right approach. If you're seeing the layout being applied twice, then maybe you still have a Layout.js file that needs to be removed now that you're rendering the Layout from your Page component.