Test api connect

Author: Phuc La

libs/graphcms.js

@@ -0,0 +1,121 @@
+async function fetchAPI(query, { variables, preview } = {}) {
+  console.log("process.env.GRAPHCMS_PROJECT_API");
+  console.log(query, variables);
+  const res = await fetch(process.env.GRAPHCMS_PROJECT_API, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${process.env.GRAPHCMS_DEV_AUTH_TOKEN}`,
+    },
+    body: JSON.stringify({
+      query: query,
+    }),
+  });
+  const json = await res.json();
+
+  if (json.errors) {
+    console.log(process.env.NEXT_EXAMPLE_CMS_GCMS_PROJECT_ID);
+    console.error(json.errors);
+    throw new Error("Failed to fetch API");
+  }
+
+  // return json.data;
+  return "";
+}
+
+export async function getPreviewPostBySlug(slug) {
+  const data = await fetchAPI(
+    `
+    query PostBySlug($slug: String!, $stage: Stage!) {
+      post(where: {slug: $slug}, stage: $stage) {
+        slug
+      }
+    }`,
+    {
+      preview: true,
+      variables: {
+        stage: "DRAFT",
+        slug,
+      },
+    }
+  );
+  return data.post;
+}
+
+export async function getAllPostsWithSlug() {
+  const data = await fetchAPI(`
+    {
+      posts {
+        slug
+      }
+    }
+  `);
+  return data.posts;
+}
+
+export async function getAllPostsForHome(preview) {
+  const data = await fetchAPI(
+    `
+    query MyQuery {
+      users_ID {
+        userName
+        id
+      }
+    }
+  `
+  );
+  console.log("data", data);
+  return data;
+}
+
+export async function getPostAndMorePosts(slug, preview) {
+  const data = await fetchAPI(
+    `
+    query PostBySlug($slug: String!, $stage: Stage!) {
+      post(stage: $stage, where: {slug: $slug}) {
+        title
+        slug
+        content {
+          html
+        }
+        date
+        ogImage: coverImage {
+          url(transformation: {image: {resize: {fit: crop, width: 2000, height: 1000}}})
+        }
+        coverImage {
+          url(transformation: {image: {resize: {fit: crop, width: 2000, height: 1000}}})
+        }
+        author {
+          name
+          picture {
+            url(transformation: {image: {resize: {fit: crop, width: 100, height: 100}}})
+          }
+        }
+      }
+      morePosts: posts(orderBy: date_DESC, first: 2, where: {slug_not_in: [$slug]}) {
+        title
+        slug
+        excerpt
+        date
+        coverImage {
+          url(transformation: {image: {resize: {fit: crop, width: 2000, height: 1000}}})
+        }
+        author {
+          name
+          picture {
+            url(transformation: {image: {resize: {fit: crop, width: 100, height: 100}}})
+          }
+        }
+      }
+    }
+  `,
+    {
+      preview,
+      variables: {
+        stage: preview ? "DRAFT" : "PUBLISHED",
+        slug,
+      },
+    }
+  );
+  return data;
+}

pages/api/preview.js

@@ -0,0 +1,28 @@
+import { getPreviewPostBySlug } from "../../libs/graphcms";
+
+export default async function handler(req, res) {
+  // Check the secret and next parameters
+  // This secret should only be known to this API route and the CMS
+  if (
+    req.query.secret !== process.env.GRAPHCMS_PREVIEW_SECRET ||
+    !req.query.slug
+  ) {
+    return res.status(401).json({ message: "Invalid token" });
+  }
+
+  // Fetch the headless CMS to check if the provided `slug` exists
+  const post = await getPreviewPostBySlug(req.query.slug);
+
+  // If the slug doesn't exist prevent preview mode from being enabled
+  if (!post) {
+    return res.status(401).json({ message: "Invalid slug" });
+  }
+
+  // Enable Preview Mode by setting the cookies
+  res.setPreviewData({});
+
+  // Redirect to the path from the fetched post
+  // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
+  res.writeHead(307, { Location: `/posts/${post.slug}` });
+  res.end();
+}

pages/index.js

@@ -1,5 +1,6 @@
-import Head from 'next/head'
-import styles from '../styles/Home.module.css'
+import Head from "next/head";
+import styles from "../styles/Home.module.css";
+import { getAllPostsForHome } from "../libs/graphcms";
 
 export default function Home() {
   return (
@@ -15,7 +16,7 @@ export default function Home() {
         </h1>
 
         <p className={styles.description}>
-          Get started by editing{' '}
+          Get started by editing{" "}
           <code className={styles.code}>pages/index.js</code>
         </p>
 
@@ -56,10 +57,18 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
         </a>
       </footer>
     </div>
-  )
+  );
+}
+
+export async function getStaticProps({ preview = false }) {
+  const posts = (await getAllPostsForHome(preview)) || [];
+  console.log("fetch", posts, preview);
+  return {
+    props: { posts, preview },
+  };
 }