react-notion-x
react-notion-x copied to clipboard
Fix & improve collection view support (databases)
Notion made a change to their private API a few weeks ago which broke our support for many collection views.
This issue is to track fixing support for these changes, since it's currently spread across multiple issues.
- Older views seem to still work for the most part (demo)
- Views created recently have a different data model which we need to support
- Some older views aren't rendering properly like board views
One potential option would be to use the official API for database support (since that's what it's really, really good at), and to use the unofficial API for page content support (since it's much more consistent than the official API in this case https://github.com/NotionX/react-notion-x/pull/256).
The advantage of this approach is that collection support is inherently complex and brittle, so deferring this complexity onto the official API would be great for us.
The downside of this approach is that it would require react-notion-x
users to use both the official API (with an API key) and the unofficial API, which is a bit awkward.
Would love to hear people's thoughts.
See also #246, #242, #104, #244, #113
cc @normdoow @datduyng @pbteja1998 @biswadipmaity @yogeshwaran-ramesh @TrillCyborg @schickling
I'm working on a hot fix with the unofficial api. Hoping to have that complete by the end of this week if not today. 😅
Implemented here: https://github.com/NotionX/react-notion-x/pull/265
#265 has been released in 6.10.0
which is a great start 🥳
There are still quite a few cases where database views either aren't displaying at all or aren't displaying correctly, so I'm going to keep this meta issue open for us to track them.
It happens when we group something with "Multi-select" in the border view I think.
https://react-notion-x-demo.transitivebullsh.it/810a38d83ac24a7ebae4199e148eb290

I have discovered many ways in which collections are kinda broken. The 2 most noticeable are:
1. Board, Group by: Status
When something is grouped by a Status property, the board view is completly broken / Won't render the page at all
Notion page (Origin):
The resulting page will cause a build error when trying to render it. WON'T render
2. Table views side by side
when there are 2 table views side by side in a "2 column block" the render output will be messed up.
Notion page (Origin):
Render output:
Note that in the output there are no scrollbars and is completly static (no horizontal scrollable)
Also note that it works properly when viewed in cellphone mode
I'm still facing the same issue when I try to render it on mobile (example), is there a solution to this?