如何使用 React 使用 Notion API

Posted 2023-02-16

【中文标题】如何使用 React 使用 Notion API

【英文标题】：How to consume Notion API with React

【发布时间】：2021-08-06 01:54:19

【问题描述】：

我正在尝试使用新的 Notion API 作为我个人网站的 CMS。 作为一种改进方法，我尝试将它与 React 一起使用。但它似乎不允许CORS（我使用Axios）。

使用此 API 的最佳方式是什么？使用 Express.JS 后端？我认为这对我的使用来说太过分了（我只想阅读页面和块，而不是编辑）。

这是我实际的 API 调用，但来自 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);
      );
      

事实上，我从来没有真正体验过后端，所以我不知道是否真的有义务使用 API。

谢谢。

【问题讨论】：

您绝对希望拥有一个后端，否则您的凭据必须是公开的。

【参考方案1】：

你会考虑使用像 NextJS 这样的反应框架吗？您可以在构建期间使用其 SSG 功能生成页面，在这些页面中，您的凭据将在客户端不可见。

https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation

Notion 也有官方的 js sdk，所以你不必费力地做所有的 API 调用：

https://github.com/makenotion/notion-sdk-js

【参考方案2】：

我通过 Next.js 解决了这个问题。

我试过官方notion-sdk-js，但还是不能解决这个问题，因为它可能是针对服务器而不是客户端的。

通过使用Next.js的getServerSideProps，可以在每次客户端请求之前通过fetch获取Notion数据，然后直接将渲染后的页面返回给客户端。因为请求是在服务端完成的，所以不存在CORS问题。但代价是你必须在后台保留一个 Next.js 进程来渲染页面。