Integrating Notion API with React: Best practices and solutions

Other Questions Notion
1

Hey everyone! I’m building a personal website and want to use Notion as my CMS. I’m trying to connect it with React, but I’m running into some CORS issues when using Axios.

I’m not sure what’s the best way to handle this. Should I set up an Express.js backend? It feels like overkill since I only need to read pages and blocks, not edit them.

Here’s a snippet of what I’ve tried:

function fetchNotionData(pageId) {
  const notionApiUrl = `https://api.notion.com/v1/blocks/${pageId}/children`;
  const headers = {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Notion-Version': '2022-06-28'
  };

  fetch(notionApiUrl, { headers })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
}

I’m pretty new to backend stuff, so I’m not sure if using the API directly from React is even possible. Any tips or best practices for integrating Notion API with React would be super helpful. Thanks!

2

I’ve been down this road before, and I can tell you that setting up a proxy server with Express.js is definitely the way to go. It’s not overkill at all – it’s actually a smart move for security and flexibility.

Here’s what worked for me: I created a simple Express server that acts as a middleman between my React app and the Notion API. This solved the CORS issues and kept my API key safe on the server side.

In my React app, I just make requests to my own Express server instead of directly to Notion. It’s a bit more setup initially, but it’s worth it. You’ll have better control over your requests, and you can add caching or rate limiting if needed.

One tip: use environment variables for your API keys in the Express server. It’s a good habit to get into for keeping sensitive info out of your codebase.

Don’t be intimidated by the backend stuff. Once you get it set up, it’s pretty straightforward to use. And trust me, it’ll make your life easier in the long run, especially if you plan to expand your project later.

3

I’ve worked with the Notion API in a React project, and you’re right about the CORS issues. Setting up an Express.js backend isn’t overkill; it’s actually a solid approach. It not only solves the CORS problem but also helps keep your API key secure.

Here’s what I did: I created a simple Express server that acts as a proxy. It handles requests from my React app and forwards them to the Notion API. This way, the API key stays on the server, and I avoid CORS errors.

For the React side, I used the fetch API to make requests to my Express server instead of directly to Notion. It’s a bit more setup, but it’s more secure and flexible in the long run. Plus, if you ever need to add more functionality or integrate with other APIs, you’ll already have a backend in place.

4

hey, i’ve been in the same boat! i built a quick express proxy to handle cors so react can talk to notion safely. opps, a tad of extra work but it keeps my key secure. trust me, it’s worth it!