I am following a tutorial to create a blog using headless cms with nextjs .
Even though api calls are working but it is not being rendered on the localhost. following is the code in index.js :
import Head from "next/head";
import styles from "../styles/Home.module.css";
import { GraphQLClient, gql } from "graphql-request";
import BlogPost from "../components/BlogPost";
const graphcms = new GraphQLClient(
"https://api-ap-south-1.graphcms.com/v2/cl4plwtca25zv01z4apa66xo8/master"
);
const query = gql`
{
posts {
id
title
date
slug
content {
html
}
author {
name
picture {
url
}
}
coverImage {
url
}
}
}
`;
export async function getStaticProps() {
const { posts } = await graphcms.request(query);
return {
props: {
posts,
},
revalidate: 10,
};
}
export default function Home({ posts }) {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
{posts.map((post) => {
<BlogPost
title={post.title}
author={post.author}
slug={post.slug}
coverImage={post.coverImage}
date={post.date}
/>;
})}
</main>
</div>
);
}
following is the code in BlogPost.js:
import Link from "next/link";
import styles from "../styles/BlogPost.module.css";
export default function BlogPost({ title, author, coverImage, date, slug }) {
return (
<div className={styles.card}>
<Link href={`/posts/&{slug}`}>
<div className={styles.imgContainer}>
<img src={coverImage.url} alt=" " />
</div>
</Link>
<div className={styles.text}>
<h2>{title}</h2>
<div className={styles.details}>
<div style={style.author}>
<img src={author.picture.url} alt="" />
</div>
</div>
</div>
</div>
);
}
with the above code it is expected to show everything that is on graphcms but I am only getting a blank screen. Please find the problem here!
You're not returning anything in your .map
(Assuming you really are getting data)
{posts.map((post) => {
return <BlogPost <---- notice the `return` keyword
title={post.title}
author={post.author}
slug={post.slug}
coverImage={post.coverImage}
date={post.date}
/>;
})}