From 6b385bb4dc17e78e243ae80e7ac2502111687906 Mon Sep 17 00:00:00 2001 From: ChrisLaRocque Date: Mon, 14 Aug 2023 23:10:55 -0400 Subject: [PATCH 1/3] Don't do this at home Or anywhere for any reason --- components/post-body.js | 3 + lib/api.js | 209 +++++++++++++++++++++++----------------- pages/posts/[slug].js | 2 +- 3 files changed, 126 insertions(+), 88 deletions(-) diff --git a/components/post-body.js b/components/post-body.js index a155bd3..c2aae29 100644 --- a/components/post-body.js +++ b/components/post-body.js @@ -15,6 +15,9 @@ const customMarkdownOptions = (content) => ({ }); export default function PostBody({ content }) { + if (content.raw) { + content.json = JSON.parse(content.raw); + } return (
diff --git a/lib/api.js b/lib/api.js index ba6fa21..7fc1ecb 100644 --- a/lib/api.js +++ b/lib/api.js @@ -1,9 +1,30 @@ -const IS_DEV = process.env.NODE_ENV === "development"; - -const POST_GRAPHQL_FIELDS = ` -sys { +// const IS_DEV = process.env.NODE_ENV === "development"; // stackbit runs in "development" +const IS_DEV = false; +const CONTENT_FIELDS = IS_DEV + ? `content { + json + links { + assets { + block { + sys { + id + } + url + description + } + } + } +}` + : `content { + raw +}`; +const ID_FIELD = IS_DEV + ? `sys { id -} +}` + : `contentful_id`; +const POST_GRAPHQL_FIELDS = ` +${ID_FIELD} slug title coverImage { @@ -15,119 +36,133 @@ author { picture { url } - sys { - id - } + ${ID_FIELD} } excerpt -content { - json - links { - assets { - block { - sys { - id - } - url - description - } - } - } -} +${CONTENT_FIELDS} `; async function fetchGraphQL(query, preview = false) { - return fetch( - `https://graphql.contentful.com/content/v1/spaces/${process.env.CONTENTFUL_SPACE_ID}`, - { - method: "POST", - headers: { - "Content-Type": "application/json", - Authorization: `Bearer ${ - IS_DEV - ? process.env.CONTENTFUL_PREVIEW_TOKEN - : process.env.CONTENTFUL_ACCESS_TOKEN - }`, - }, - body: JSON.stringify({ query }), - } - ).then((response) => response.json()); + const url = IS_DEV + ? `https://graphql.contentful.com/content/v1/spaces/${process.env.CONTENTFUL_SPACE_ID}` + : process.env.CONNECT_URL; + return fetch(url, { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${ + IS_DEV + ? process.env.CONTENTFUL_PREVIEW_TOKEN + : process.env.CONNECT_TOKEN + }`, + }, + body: JSON.stringify({ query }), + }).then((response) => response.json()); } function extractPost(fetchResponse) { - return fetchResponse?.data?.postCollection?.items?.[0]; + return IS_DEV + ? fetchResponse?.data?.postCollection?.items?.[0] + : fetchResponse?.data?.contentfulPost; } function extractPostEntries(fetchResponse) { - return fetchResponse?.data?.postCollection?.items; + return IS_DEV + ? fetchResponse?.data?.postCollection?.items + : fetchResponse?.data?.allContentfulPost?.nodes; } export async function getPreviewPostBySlug(slug) { - const entry = await fetchGraphQL( - `query { - postCollection(where: { slug: "${slug}" }, preview: true, limit: 1) { - items { - ${POST_GRAPHQL_FIELDS} - } + const query = IS_DEV + ? `query { + postCollection(where: { slug: "${slug}" }, preview: true, limit: 1) { + items { + ${POST_GRAPHQL_FIELDS} } - }`, - true - ); + } + }` + : `query { + allContentfulPost(where: { slug: "${slug}" }, limit: 1) { + nodes { + ${POST_GRAPHQL_FIELDS} + } + } + }`; + const entry = await fetchGraphQL(query, true); return extractPost(entry); } export async function getAllPostsWithSlug() { - const entries = await fetchGraphQL( - `query { - postCollection(where: { slug_exists: true }, order: date_DESC) { - items { - ${POST_GRAPHQL_FIELDS} - } + const query = IS_DEV + ? `query { + postCollection(where: { slug_exists: true }, order: date_DESC) { + items { + ${POST_GRAPHQL_FIELDS} + } + } + }` + : `query { + allContentfulPost(filter: { slug: {ne: null} }) { + nodes { + ${POST_GRAPHQL_FIELDS} } - }` - ); + } + }`; + const entries = await fetchGraphQL(query); return extractPostEntries(entries); } export async function getAllPostsForHome(preview) { - const entries = await fetchGraphQL( - `query { - postCollection(order: date_DESC, preview: ${preview ? "true" : "false"}) { - items { - ${POST_GRAPHQL_FIELDS} - } + const query = IS_DEV + ? `query { + postCollection(order: date_DESC, preview: ${preview ? "true" : "false"}) { + items { + ${POST_GRAPHQL_FIELDS} + } + } + }` + : `query { + allContentfulPost { + nodes { + ${POST_GRAPHQL_FIELDS} } - }`, - preview - ); + } + }`; + const entries = await fetchGraphQL(query, preview); return extractPostEntries(entries); } export async function getPostAndMorePosts(slug, preview) { - const entry = await fetchGraphQL( - `query { - postCollection(where: { slug: "${slug}" }, preview: ${ - IS_DEV ? "true" : "false" - }, limit: 1) { - items { - ${POST_GRAPHQL_FIELDS} - } + const entryQuery = IS_DEV + ? `query { + postCollection(where: { slug: "${slug}" }, preview: true, limit: 1) { + items { + ${POST_GRAPHQL_FIELDS} } - }`, - preview - ); - const entries = await fetchGraphQL( - `query { - postCollection(where: { slug_not_in: "${slug}" }, order: date_DESC, preview: ${ - preview ? "true" : "false" - }, limit: 2) { - items { - ${POST_GRAPHQL_FIELDS} - } + } + }` + : `query { + contentfulPost(slug: {eq: "${slug}"}) { + ${POST_GRAPHQL_FIELDS} + } + }`; + const entry = await fetchGraphQL(entryQuery, preview); + const entriesQuery = IS_DEV + ? `query { + postCollection(where: { slug_not_in: "${slug}" }, order: date_DESC, preview: true, limit: 2) { + items { + ${POST_GRAPHQL_FIELDS} } - }`, - preview - ); + } + }` + : `query { + allContentfulPost{ + nodes { + ${POST_GRAPHQL_FIELDS} + } + } + }`; + const entries = await fetchGraphQL(entriesQuery, preview); return { post: extractPost(entry), morePosts: extractPostEntries(entries), diff --git a/pages/posts/[slug].js b/pages/posts/[slug].js index 8497552..71581f3 100644 --- a/pages/posts/[slug].js +++ b/pages/posts/[slug].js @@ -27,7 +27,7 @@ export default function Post({ post, morePosts, preview }) { Loading… ) : ( <> -
+
{`${post.title} | Next.js Blog Example with ${CMS_NAME}`} From c389b697ba704cee0c149d412ca8fed428f83301 Mon Sep 17 00:00:00 2001 From: ChrisLaRocque <larocque.christopher@gmail.com> Date: Mon, 14 Aug 2023 23:12:44 -0400 Subject: [PATCH 2/3] Update api.js --- lib/api.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/api.js b/lib/api.js index 7fc1ecb..71ed5e3 100644 --- a/lib/api.js +++ b/lib/api.js @@ -1,5 +1,4 @@ -// const IS_DEV = process.env.NODE_ENV === "development"; // stackbit runs in "development" -const IS_DEV = false; +const IS_DEV = process.env.NODE_ENV === "development"; // stackbit runs in "development" const CONTENT_FIELDS = IS_DEV ? `content { json From 5a41ca283a7b7d1339e6825f47f5b93fbe8dd685 Mon Sep 17 00:00:00 2001 From: ChrisLaRocque <larocque.christopher@gmail.com> Date: Mon, 14 Aug 2023 23:23:46 -0400 Subject: [PATCH 3/3] ID fix --- .gitignore | 4 +++- pages/index.js | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index 19ab502..5cebda0 100644 --- a/.gitignore +++ b/.gitignore @@ -35,4 +35,6 @@ yarn-error.log* next-env.d.ts # stackbit -.stackbit/* \ No newline at end of file +.stackbit/* +# Local Netlify folder +.netlify diff --git a/pages/index.js b/pages/index.js index f64d789..52b2b7d 100644 --- a/pages/index.js +++ b/pages/index.js @@ -26,7 +26,7 @@ export default function Index({ preview, allPosts }) { author={heroPost.author} slug={heroPost.slug} excerpt={heroPost.excerpt} - data-sb-object-id={heroPost.sys.id} + data-sb-object-id={heroPost.sys?.id || heroPost.contentful_id} /> )} {morePosts.length > 0 && <MoreStories posts={morePosts} />}