如何在next.js getInitialProps中調用Prismic API？

Question

如何調用Prismic (CMS) API，從next.js application？在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開發套件作爲依賴，如所描述in their documentation.

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中的Prism 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() { 
    // fetch Prismic API and return the results 
    } 

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

Answer 1

您已經準備好了所有組件。而不是fetch，請等待Prismic請求。然後返回結果。

import React from 'react'; 
import Prismic from 'prismic-javascript'; 

const apiEndpoint = 'https://project.prismic.io/api/v2'; 
const apiToken = 'TOKEN'; 

export default class Index extends React.Component { 
    static async getInitialProps({ req, query }) { 
    const data = await Prismic.getApi(apiEndpoint, { accessToken: apiToken }) 
     .then(api => { 
     return api.query(''); // An empty query will return all the documents 
     }) 
     .catch(err => console.log(err)); 

    return { cars: data.results }; 
    } 

    render() { 
    return <div>Example car id: {this.props.cars[0].id}</div>; 
    } 
}