Don't do this at home

.gitignore

@@ -35,4 +35,6 @@ yarn-error.log*
 next-env.d.ts
 
 # stackbit
-.stackbit/*
+.stackbit/*
+# Local Netlify folder
+.netlify

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 (
     <div className="max-w-2xl mx-auto">
       <div className={markdownStyles["markdown"]} data-sb-field-path="content">

lib/api.js

@@ -1,9 +1,29 @@
-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 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 +35,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: ${IS_DEV ? "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),

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} />}

pages/posts/[slug].js

@@ -27,7 +27,7 @@ export default function Post({ post, morePosts, preview }) {
           <PostTitle>Loading…</PostTitle>
         ) : (
           <>
-            <article data-sb-object-id={post.sys.id}>
+            <article data-sb-object-id={post?.sys?.id || post.contentful_id}>
               <Head>
                 <title>
                   {`${post.title} | Next.js Blog Example with ${CMS_NAME}`}