無料版がリリースされたヘッドレスCMS「Newt」をReactで触ってみた

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { createClient } from 'newt-client-js'; // Newtモジュールのインポート

const client = createClient({
  spaceUid: 'XXXXXXXXXXX', // Newt SpaceUIDの指定
  token: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', // Newt アクセストークンの指定
  apiType: 'cdn'
});

let _title: string;
client
  .getContent({
    appUid: 'blog',
    modelUid: 'article',
    contentId: '61b1688832470a0018d79f4a'
  })
  .then((content: any) => {
    _title = content.title;
    console.log(content.title);
  })
  .catch((err) => console.log(err));

const App = () => {
  return (
    < div className="App" >
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{_title}</p>
        <a
          className="App-link"
          href="/#"
        >
        </a>
      </header>
    </div >
  );
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

const client = createClient({
  spaceUid: 'XXXXXXXXXXX',
  token: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
  apiType: 'cdn'
});

client
  .getContent({
    appUid: 'blog',
    modelUid: 'article',
    contentId: '61b1688832470a0018d79f4a'
  })
  .then((content: any) => {
    console.log(content.title)
  })
  .catch((err) => console.log(err));