Get content from graphCMS with Next.js

index.jsx

import React from "react";
import { request, GraphQLClient } from "graphql-request";

export default class HomePage extends React.Component {
  static async getInitialProps() {
    const query = `{
      allPosts {
        id
        slug
        coverImage {
          url
        }
        title
        content
        authors {
          id
          name
        }
      }
    }
    `;
    return request(
      "https://api.graphcms.com/simple/v1/cjfgpbd8s1bj101427u4eu2b0",
      query
    );
  }
  render() {
    return (
      <div className="container section">
        {this.props.allPosts.map((post, index) => (
          <div>
            {post.coverImage.url && (
              <img height="200px" src={post.coverImage.url} />
            )}
            <h2>{post.title}</h2>
            <p>{post.content.substr(0, 500)} ... </p>
          </div>
        ))}
      </div>
    );
  }
}