NotionX / react-notion-x

Fast and accurate React renderer for Notion. TS batteries included. ⚡️
https://react-notion-x-demo.transitivebullsh.it
MIT License
4.79k stars 560 forks source link

How do you get collection data header values? #10

Open HamzaMoiyadi opened 3 years ago

HamzaMoiyadi commented 3 years ago

How would I be able to fetch the collection property names using getCollectionData??

I am using the below snippet to get the format of the collection data, but it's coming jumbled up except for the first column.

Object.keys(collectionView).forEach((cid) => {
    console.log(collectionView[cid].value.format);
  });

Format of the data:

{
  table_wrap: true,
  table_properties: [
    { width: 276, visible: true, property: 'title' },
    { width: 200, visible: true, property: '3x=Q' },
    { width: 200, visible: true, property: 'S)s,' },
    { width: 411, visible: true, property: 'o+,#' }
  ]
}

If it helps, I'm trying to build a simple blog with the index page holding the links to all the different pages based on their slug and not the pageId.

Public link for the collection: https://www.notion.so/hamzamoiyadi/52db845d75fb4e8396b66234f05caecb?v=afb3d901772e474195c013570f511696

transitive-bullshit commented 3 years ago

Hey @HamzaMoiyadi, sorry for the late reply.

The short answer is that I'd recommend using getPage as it aggregates all the related blocks and collection queries for you. Once you have that, just explore the JSON to find the data you're looking for. We pass the API values that Notion uses internally back without making any changes to them -- we only add additional data at the top-level of ExtendedRecordMap to make them all accessible from one object as the result of calling getPage.

But in terms of understanding the way Notion formats data and how properties relate to collections and collection views, I honestly think the best way to figure that out is by exploring some concrete JSON data.

I'm trying to build a simple blog with the index page holding the links to all the different pages based on their slug and not the pageId.

Here's an complete example of how to get this working in production: https://github.com/transitive-bullshit/nextjs-notion-starter-kit