Refactor data fetching method from REST to GraphQL

components/About.jsx

@@ -4,11 +4,11 @@ import Terminal from 'terminal-in-react';
 
 class AboutContent extends Component {
 	about = () =>
-		"Hi there! I'm Mekel Ilyasa. A computer nerd who love to learn all things from frontend into backend & security xD. I have no life, I spend almost all my entire time in front of my laptop LMAO. I do programming not because want expect to get paid or get adulation by the public, but because it is fun to program. There's no fancy animation or design in this blog, I make this blog simple and lightweight as possible to boost the performance :) ";
+		"Hi there! I'm Mekel Ilyasa. A computer nerd who love to learn all things from frontend into backend & security xD. I'm programmer, I have no life, I spend almost all my entire time in front of my computer LMAO. I do programming not because want expect to get paid or get adulation by the public, but because it is fun to program, yup I follow Linus Torvalds ideology LOL. There's no fancy animation or design in this blog, I make this blog simple and lightweight as possible to boost the performance :) ";
 	education = () =>
 		"I'm currently pursuing my bachelor degree at Computer Engineering Departement, Diponegoro University. I know, majoring 'IT' at college sucks af but I try my best to survive with old school tech stack at college LOL. I code using PHP and Java too at college even I hate it.";
 	skills = () =>
-		'My main skills are Python & Javascript, but sometimes I also tinkering with low level language like C, C++ & assembly too. My fav tech stack are MERN (MongoDB, Express, React, Node.js) stack. You can visit my github to see all my works and my favorite tech stack. Right now I still exploring an adventure to learn Go programming language to build robust backend services and learn SSR and SSG using Next.js.';
+		'My main skills are Python & Javascript, but sometimes I also tinkering with low level language like C, C++ & assembly too. My fav tech stack are MERN (MongoDB, Express, React, Node.js) stack. You can visit my github to see all my works and my favorite tech stack. Right now I still exploring an adventure to learn Go programming language to build robust backend services and learn SSR stuff using Next.js.';
 
 	render() {
 		return (

lib/graphql/queries.ts

@@ -0,0 +1,38 @@
+// import { gql } from '@apollo/client';
+import { GraphQLClient, gql } from 'graphql-request';
+
+const client = new GraphQLClient(process.env.NEXT_PUBLIC_STRAPI_GRAPHQL_URL);
+
+export const getAllPosts = () => {
+	const query = gql`
+		{
+			posts(sort: "date:desc") {
+				id
+				title
+				content
+				cover {
+					url
+				}
+				date
+			}
+		}
+	`;
+	return client.request(query);
+};
+
+export const getPostById = (postId) => {
+	const query = gql`
+		{
+			post(id:"${postId}") {
+				id
+				title
+				content
+				cover {
+					url
+				}
+				date
+			}
+		}
+	`;
+	return client.request(query);
+};

package.json

@@ -10,6 +10,8 @@
   "dependencies": {
     "date-fns": "^2.16.1",
     "framer-motion": "^3.3.0",
+    "graphql": "^15.5.0",
+    "graphql-request": "^3.4.0",
     "next": "^10.0.6",
     "next-themes": "0.0.10",
     "nprogress": "^0.2.0",

pages/index.tsx

@@ -4,6 +4,7 @@ import { motion } from 'framer-motion';
 import Navbar from '../components/Navbar';
 import Cards from '../components/Cards';
 import Footer from '../components/Footer';
+import { getAllPosts } from '../lib/graphql/queries';
 import { fadeInUp, stagger } from '../utils/animate';
 
 export default function Home({ posts }) {
@@ -23,8 +24,8 @@ export default function Home({ posts }) {
 			>
 				<ContentWrapper>
 					{posts.map((post) => (
-						<motion.div key={post._id} variants={fadeInUp}>
-							<Cards post={post} key={post._id} />
+						<motion.div key={post.id} variants={fadeInUp}>
+							<Cards post={post} key={post.id} />
 						</motion.div>
 					))}
 				</ContentWrapper>
@@ -42,13 +43,10 @@ const ContentWrapper = styled.div`
 `;
 
 export async function getStaticProps() {
-	const res = await fetch(
-		`${process.env.NEXT_PUBLIC_STRAPI_API_URL}/posts?_sort=date:DESC`
-	);
-	const data = await res.json();
+	const { posts } = await getAllPosts();
 	return {
 		props: {
-			posts: data,
+			posts,
 		},
 	};
 }

pages/post/[id].tsx → pages/post/[slug].tsx

@@ -9,8 +9,9 @@ import readingTime from 'reading-time';
 import Navbar from '../../components/Navbar';
 import Footer from '../../components/Footer';
 import CodeBlock from '../../components/CodeBlock';
-import { formatDate } from '../../utils/date';
+import { getPostById, getAllPosts } from '../../lib/graphql/queries';
 import { fadeInUp, stagger } from '../../utils/animate';
+import { formatDate } from '../../utils/date';
 
 interface Post {
 	post: {
@@ -164,23 +165,19 @@ const PostWrapper = styled.div`
 `;
 
 export async function getStaticPaths() {
-	const res = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_API_URL}/posts`);
-	const posts = await res.json();
+	const { posts } = await getAllPosts();
 	return {
 		fallback: true,
 		paths: posts.map((post) => ({
 			params: {
-				id: post._id,
+				slug: post.id,
 			},
 		})),
 	};
 }
 
 export async function getStaticProps(ctx) {
-	const res = await fetch(
-		`${process.env.NEXT_PUBLIC_STRAPI_API_URL}/posts/${ctx.params.id}`
-	);
-	const post = await res.json();
+	const { post } = await getPostById(ctx.params.slug);
 	return {
 		props: {
 			post,