examples/dsg-ssr/src/pages/ssr-listing/{kontentItemArticle.elements__slug__value}.js
import React from "react"
import Layout from "../../components/layout"
import { plugins } from "../../../gatsby-config"
export default function Component({ serverData }) {
return (
<Layout>
<h1>{serverData.title}</h1>
<div>Published: {serverData.date}</div>
<p>{serverData.content}</p>
</Layout>
)
}
const kontentSourcePluginConfig = plugins.find(
plugin => plugin.resolve === "@kontent-ai/gatsby-source"
)
const projectId = kontentSourcePluginConfig.options.projectId
const language = kontentSourcePluginConfig.options.languageCodenames[0]
export async function getServerData(context) {
try {
const response = await fetch(`https://graphql.kontent.ai/${projectId}`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
query: `
query ssrArticleQuery($slug: String!, $language: String!) {
article_All(where: {slug: {eq: $slug}}, limit: 1, languageFilter: {languageCodename: $language}) {
items {
title
date
content
}
}
}`,
variables: {
slug: context.params.elements__slug__value,
language: language,
},
}),
}).then(res => res.json())
return {
props: response.data.article_All.items[0],
}
} catch (error) {
return {
status: 500,
headers: {},
props: {},
}
}
}