How to consume Notion API with React

user_10737787 0
Viewed 2399

I'm trying to use the new Notion API as a CMS for my personnal website. As a way to improve, i tried to use it with React. But it seems that it does not allow CORS (i use Axios).

What is the best way to consume this API ? Use an Express.JS Back-end ? I would think it's overkill for my use (I just want to read pages & blocks, not edit).

Here is my actual API Call, but from React :

    const getPages = (apiCmsPage) => {
    var config = {
        method: 'get',
        url: 'https://api.notion.com/v1/blocks/'+ apiCmsPage +'/children?page_size=100',
        headers: { 
          'Authorization': KEY,
          'User-Agent' : 'PostmanRuntime/7.26.8'
        }
      };
      
      axios(config)
      .then(function (response) {
        console.log(JSON.stringify(response.data));
      })
      .catch(function (error) {
        console.log(error);
      });
      
}

In fact, I never really experienced back-end, so I don't know if it's really obligated to use the API.

Thanks.

notion-api reactjs node.js javascript
2 Answers

I solved this problem by Next.js.

I tried the official notion-sdk-js, but still can’t solve this problem, because it may be aimed at the server instead of the client.

By using the getServerSideProps of Next.js, Notion data can be obtained through fetch before each client request, and then the rendered page is directly returned to the client. Because the request is completed on the server side, there is no CORS problem. But the price is that you have to keep a Next.js process in the background for rendering the page.

user_125796230
user_159480570
Related