如何在next.js getInitialProps中调用Prismic API?

JavaScript React.js

卡卡西

2020-03-23

如何next.js应用程序调用Prismic(CMS) API 在next.js中,我之前有过:

import React from 'react'
import Link from 'next/link'
import 'isomorphic-fetch'

export default class Index extends React.Component {
  static async getInitialProps () {
    const res = await fetch('https://myAPI_URL')
    const json = await res.json()
    return { cars: json.results }
  }

  render () {
    return (
      <div>
        <p>I can see the data {this.props.cars} </p>
      </div>
    )
  }
}

但是我想使用Prismic开发套件作为依赖项,如他们的文档中所述。

npm install prismic-javascript prismic-dom --save

以及调用Prismic的代码:

const Prismic = require('prismic-javascript');

const apiEndpoint = "https://your-repository-name.prismic.io/api/v2";
const apiToken = "this_is_a_fake_token_M1NrQUFDWUE0RYvQnvv70";

Prismic.getApi(apiEndpoint, {accessToken: apiToken}).then(function(api) {
  return api.query(""); // An empty query will return all the documents
}).then(function(response) {
  console.log("Documents: ", response.results);
}, function(err) {
  console.log("Something went wrong: ", err);
});

但是,如何在getInitialProps内部使nexts.js与Prismic API配合使用?例如:

import React from 'react'
import Link from 'next/link'
import 'isomorphic-fetch'

export default class Index extends React.Component {
  static async getInitialProps () {
    // fetch Prismic API and return the results
  }

  render () {
    return (
      <div>
        <p>Showing data fetched from API here</p>
      </div>
    )
  }
}

第3130篇《如何在next.js getInitialProps中调用Prismic API?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android