Integrating Notion API with React: Best practices and solutions

Other Questions Notion
1

Hey everyone! I’m working on a personal project and I’m trying to use Notion’s API as a CMS for my website. I’ve been experimenting with React, but I’m running into some issues with CORS when using Axios.

I’m not sure what the best approach is here. Should I set up an Express.js backend? It feels like overkill since I only need to read pages and blocks, not edit them. I’m pretty new to backend stuff, so I’m not even sure if it’s absolutely necessary to use the API this way.

Here’s a simplified version of what I’ve tried:

function fetchNotionData(pageId) {
  const options = {
    method: 'GET',
    url: `https://api.notion.com/v1/pages/${pageId}`,
    headers: {
      'Authorization': 'Bearer YOUR_API_KEY',
      'Notion-Version': '2021-08-16'
    }
  };

  axios(options)
    .then(response => console.log(response.data))
    .catch(error => console.error('Error:', error));
}

Any tips or suggestions would be super helpful! Thanks in advance!

2

yo, i’ve been there too. trust me, setting up a backend isn’t as scary as it sounds. i used netlify functions and it was pretty straightforward. it keeps ur API key safe and handles CORS. Plus, u can add more features later if u need. give it a shot, u might surprise urself!

3

I encountered a similar situation when working with Notion’s API and React. My experience taught me that setting up a backend actually adds a layer of security by keeping your API key hidden and resolving CORS issues effectively. I opted for a simple Express server as a middleman to handle API requests and then pass the data to the frontend. This approach not only solved the CORS errors but also offered the flexibility to manipulate data as needed. Overall, the additional setup made my application more robust and secure with minimal complexity.

4

Having worked extensively with Notion’s API, I can confirm that setting up a backend is not only necessary for security reasons but also vital for managing CORS effectively. A lightweight Node.js server with Express offers a pragmatic solution by keeping your API key secure and acting as a proxy for API requests. My implementation involves creating a dedicated endpoint that forwards requests to Notion, while environment variables protect sensitive details. Although this might seem like extra work initially, it ultimately streamlines maintenance and improves overall system reliability.