😀NextjsBlogWithGraphQL (ok)
https://github.com/Affan-Moiz/NextjsBlogWithGraphQL
Back-end new
package.json
{
"name": "backend",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"dev": "nodemon index.ts"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"@apollo/server": "^4.11.3",
"@types/node": "^22.10.7",
"@types/typescript": "^2.0.0",
"@types/uuid": "^10.0.0",
"graphql": "^16.10.0",
"nodemon": "^3.1.9",
"ts-node": "^10.9.2",
"typescript": "^5.7.3",
"uuid": "^11.0.5"
}
}
index.ts
import { ApolloServer, } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone';
import { v4 as uuidv4 } from 'uuid';
// The GraphQL schema
const typeDefs = `#graphql
type Post {
id: ID!
title: String!
body: String!
author: String!
publishedDate: String!
}
type Query {
posts(page: Int, limit: Int): [Post!]!
post(id: ID!): Post
}
type Mutation {
createPost(title: String!, body: String!, author: String!): Post!
}
`;
const posts = [
{
id: '1',
title: 'First Post',
body: 'This is the first post.',
author: 'John Doe',
publishedDate: '2023-10-01',
},
];
const resolvers = {
Query: {
posts: (_: any, { page = 1, limit = 5 }) => {
const start = (page - 1) * limit;
return posts.slice(start, start + limit);
},
post: (_: any, { id }: any) => posts.find(post => post.id === id),
},
Mutation: {
createPost: (_: any, { title, body, author }: any) => {
const newPost = {
id: uuidv4(),
title,
body,
author,
publishedDate: new Date().toISOString(),
};
posts.unshift(newPost);
return newPost;
},
},
};
const server = new ApolloServer({
typeDefs,
resolvers,
});
async function main() {
const { url } = await startStandaloneServer(server);
console.log(`🚀 Server ready at ${url}`);
}
main();Back-end old
blog-backend\package.json
{
"name": "blog-backend",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"dev": "nodemon index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"apollo-server": "^3.13.0",
"graphql": "^16.10.0",
"nodemon": "^3.1.9",
"uuid": "^11.0.5"
}
}
blog-backend\index.js
const { ApolloServer, gql } = require('apollo-server');
const { v4: uuidv4 } = require('uuid');
let posts = [
{
id: '1',
title: 'First Post',
body: 'This is the first post.',
author: 'John Doe',
publishedDate: '2023-10-01',
},
];
const typeDefs = gql`
type Post {
id: ID!
title: String!
body: String!
author: String!
publishedDate: String!
}
type Query {
posts(page: Int, limit: Int): [Post!]!
post(id: ID!): Post
}
type Mutation {
createPost(title: String!, body: String!, author: String!): Post!
}
`;
const resolvers = {
Query: {
posts: (_, { page = 1, limit = 5 }) => {
const start = (page - 1) * limit;
return posts.slice(start, start + limit);
},
post: (_, { id }) => posts.find(post => post.id === id),
},
Mutation: {
createPost: (_, { title, body, author }) => {
const newPost = {
id: uuidv4(),
title,
body,
author,
publishedDate: new Date().toISOString(),
};
posts.unshift(newPost);
return newPost;
},
},
};
const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => {
console.log(`Server ready at ${url}`);
});
Front-end New
package.json
{
"name": "next",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@apollo/client": "^3.12.7",
"@hookform/resolvers": "^3.10.0",
"graphql": "^16.10.0",
"next": "15.1.5",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-hook-form": "^7.54.2",
"yup": "^1.6.1"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}
pages\index.tsx
// pages/index.tsx
import { GET_POSTS } from '@/graphql/queries';
import { useQuery } from '@apollo/client';
import { useState } from 'react';
import Tile from '@/components/Tile';
import Header from '@/components/Headers';
interface Post {
id: string;
title: string;
author: string;
publishedDate: string;
}
const HomePage = () => {
const [page, setPage] = useState(1);
const { data, loading, error } = useQuery(GET_POSTS, {
variables: { page, limit: 5 },
});
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
const handlePrevious = () => setPage((prev) => Math.max(prev - 1, 1));
const handleNext = () => setPage((prev) => prev + 1);
return (
<div>
<Header />
<div className={`container`}>
<h1 className={`header`}>Blog Posts</h1>
<div className={`postsContainer`}>
{data.posts.map((post: Post) => (
<Tile
key={post.id}
id={post.id}
title={post.title}
author={post.author}
publishedDate={post.publishedDate}
/>
))}
</div>
<div className={`paginationContainer`}>
<button
className={`paginationButton`}
onClick={handlePrevious}
disabled={page === 1}
>
Previous
</button>
<button className={`paginationButton`} onClick={handleNext}>
Next
</button>
</div>
</div>
</div>
);
};
export default HomePage;
pages\create.tsx
// pages/create.tsx
import { useForm } from 'react-hook-form';
import { useRouter } from 'next/router';
import { useMutation } from '@apollo/client';
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
import { CREATE_POST } from '@/graphql/mutations';
import { GET_POSTS } from '@/graphql/queries';
import Header from '@/components/Headers';
interface FormData {
title: string;
body: string;
author: string;
}
const schema = yup.object().shape({
title: yup
.string()
.min(5, 'Title must be at least 5 characters long')
.max(100, 'Title cannot exceed 100 characters')
.required('Title is required'),
body: yup
.string()
.min(20, 'Body must be at least 20 characters long')
.max(5000, 'Body cannot exceed 5000 characters')
.required('Body is required'),
author: yup
.string()
.min(3, 'Author name must be at least 3 characters long')
.max(50, 'Author name cannot exceed 50 characters')
.required('Author is required'),
});
export default function CreatePost() {
const router = useRouter();
const [createPost] = useMutation(CREATE_POST, {
update(cache, { data: { createPost } }) {
try {
// Attempt to read the existing posts from the cache
const existingPosts: any = cache.readQuery({
query: GET_POSTS,
variables: { page: 1, limit: 5 },
});
// If existingPosts exists, update the cache; otherwise, add the new post
cache.writeQuery({
query: GET_POSTS,
variables: { page: 1, limit: 5 },
data: {
posts: existingPosts ? [createPost, ...existingPosts.posts] : [createPost],
},
});
} catch (error) {
console.error('Error updating cache:', error);
}
},
});
const {
register,
handleSubmit,
formState: { errors, isSubmitting },
} = useForm<FormData>({
resolver: yupResolver(schema),
});
const onSubmit = async (data: FormData) => {
try {
await createPost({
variables: data,
optimisticResponse: {
createPost: {
__typename: 'Post',
id: 'temp-id',
title: data.title,
body: data.body,
author: data.author,
publishedDate: new Date().toISOString(),
},
},
});
router.push('/');
} catch (err) {
console.error('Error creating post:', err);
}
};
return (
<div className={`outerContainer`}>
<Header />
<div className={`container`}>
<h1 className={`header`}>Create a New Blog Post</h1>
<p className={`description`}>
Fill in the details below to create a new blog post.
</p>
<form onSubmit={handleSubmit(onSubmit)} className={`form`}>
<div className={`formGroup`}>
<label className={`label`}>Title</label>
<input
className={`input`}
{...register('title')}
placeholder="Enter the blog title"
/>
{errors.title && <p className={`error`}>{errors.title.message}</p>}
</div>
<div className={`formGroup`}>
<label className={`label`}>Body</label>
<textarea
className={`textarea`}
{...register('body')}
placeholder="Write your blog content here..."
/>
{errors.body && <p className={`error`}>{errors.body.message}</p>}
</div>
<div className={`formGroup`}>
<label className={`label`}>Author</label>
<input
className={`input`}
{...register('author')}
placeholder="Enter the author's name"
/>
{errors.author && <p className={`error`}>{errors.author.message}</p>}
</div>
<button className={`button`} type="submit" disabled={isSubmitting}>
{isSubmitting ? 'Submitting...' : 'Submit Post'}
</button>
</form>
</div>
</div>
);
}
pages\apolloClient.ts
import { ApolloClient, InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
uri: 'http://localhost:4000/',
cache: new InMemoryCache(),
});
export default client;pages\_app.tsx
// pages/_app.tsx
import { ApolloProvider } from '@apollo/client';
import client from '@/pages/apolloClient';
import '@/app/globals.css';
function MyApp({ Component, pageProps }: any) {
return (
<ApolloProvider client={client}>
<Component {...pageProps} />
</ApolloProvider>
);
}
export default MyApp;
pages\posts\[id].tsx
// pages\posts\[id].tsx
import { GetStaticPaths, GetStaticProps } from 'next';
import { useRouter } from 'next/router';
import client from '@/pages/apolloClient';
import { GET_POST, GET_POSTS } from '@/graphql/queries';
import Header from '@/components/Headers';
interface PostProps {
post: {
id: string;
title: string;
body: string;
author: string;
publishedDate: string;
};
}
export const getStaticPaths: GetStaticPaths = async () => {
const { data } = await client.query({
query: GET_POSTS,
variables: { page: 1, limit: 100 },
});
const paths = data.posts.map((post: any) => ({
params: { id: post.id },
}));
return { paths, fallback: 'blocking' };
};
export const getStaticProps: GetStaticProps = async ({ params }) => {
try {
const { data } = await client.query({
query: GET_POST,
variables: { id: params?.id },
});
if (!data.post) {
return { notFound: true };
}
return {
props: {
post: data.post,
},
revalidate: 10, // ISR: Revalidate every 10 seconds
};
} catch (error) {
return { notFound: true };
}
};
export default function PostPage({ post }: PostProps) {
const router = useRouter();
if (router.isFallback) {
return <div>Loading...</div>;
}
return (
<div>
<Header />
<div className={`container`}>
<h1 className={`title`}>{post.title}</h1>
<p className={`author`}>By {post.author}</p>
<p className={`date`}>
{new Date(post.publishedDate).toLocaleDateString()}
</p>
<p className={`body`}>{post.body}</p>
</div>
</div>
);
}
graphql\mutations.ts
import { gql } from '@apollo/client';
export const CREATE_POST = gql`
mutation CreatePost($title: String!, $body: String!, $author: String!) {
createPost(title: $title, body: $body, author: $author) {
id
title
publishedDate
}
}
`;
graphql\queries.ts
import { gql } from '@apollo/client';
export const GET_POSTS = gql`
query GetPosts($page: Int, $limit: Int) {
posts(page: $page, limit: $limit) {
id
title
publishedDate
}
}
`;
export const GET_POST = gql`
query GetPost($id: ID!) {
post(id: $id) {
id
title
body
author
publishedDate
}
}
`;
components\Tile.tsx
// components/Tile.tsx
import Link from 'next/link';
interface TileProps {
id: string;
title: string;
author: string;
publishedDate: string;
}
const Tile = ({ id, title, publishedDate }: TileProps) => {
return (
<div className={`tile`}>
<Link href={`/posts/${id}`}>
<h2 className={`title`}>{title}</h2>
<p className={`date`}>
{new Date(publishedDate).toDateString()}
</p>
</Link>
</div>
);
};
export default Tile;
components\Headers.tsx
// components/Header.tsx
import Link from 'next/link';
import { useRouter } from 'next/router';
const Header = () => {
const router = useRouter();
return (
<header className={`header`}>
<nav className={`nav`}>
<Link href="/" className={`navLink`}>
Home
</Link>
<Link href="/create" className={`navLink`}>
Create
</Link>
</nav>
</header>
);
};
export default Header;
app\globals.css
Front-end Old
blog-app\package.json
{
"name": "blog-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@apollo/client": "^3.12.5",
"@hookform/resolvers": "^3.10.0",
"graphql": "^16.10.0",
"next": "15.1.4",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-hook-form": "^7.54.2",
"yup": "^1.6.1"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^9",
"eslint-config-next": "15.1.4",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}
blog-app\tailwind.config.ts
import type { Config } from "tailwindcss";
export default {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
},
},
},
plugins: [],
} satisfies Config;
blog-app\styles\create.module.css
/* styles/create.module.css */
/* Outer background behind the form */
.outerContainer {
background-color: #924b52; /* Maroon background */
padding: 0; /* Remove padding to ensure proper centering */
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 43px;
}
/* Container for the form */
.container {
max-width: 700px;
width: 100%;
padding: 40px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
border: 1px solid #5e1f28; /* Slightly darker maroon border */
}
/* Header styling */
.header {
text-align: center;
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 5px;
color: #4b1e24; /* Dark maroon for the form header */
}
/* Description below the header */
.description {
text-align: center;
font-size: 1rem;
color: #555;
margin-bottom: 30px;
}
/* Form group styling */
.formGroup {
margin-bottom: 20px;
}
/* Label styling */
.label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #4b1e24; /* Maroon color for labels */
}
/* Input and textarea styling */
.input,
.textarea {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
box-sizing: border-box;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Change border color and add shadow on focus */
.input:focus,
.textarea:focus {
border-color: #7a2c34;
box-shadow: 0 0 5px rgba(122, 44, 52, 0.3);
outline: none;
}
/* Error input styling */
.errorInput {
border-color: red;
}
/* Error message styling */
.error {
color: red;
font-size: 0.9rem;
margin-top: 5px;
}
/* Submit button styling */
.button {
display: block;
width: 100%;
padding: 12px;
background-color: #7a2c34; /* Maroon button color */
color: white;
font-size: 1.1rem;
font-weight: bold;
border: 1px solid #5e1f28; /* Slightly darker maroon border */
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
/* Button hover effect */
.button:hover {
background-color: #5e1f28;
transform: scale(1.05); /* Slight pop-out effect on hover */
}
/* Disabled button styling */
.button:disabled {
background-color: #ccc;
color: #888;
border: 1px solid #ddd;
cursor: not-allowed;
}
blog-app\styles\globals.css
/* styles/globals.css */
/* Global Styles */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
background-color: #f9f9f9;
color: #333;
}
/* Links */
a {
color: #0070f3;
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
text-decoration: underline;
color: #0056b3;
}
/* Buttons */
button {
margin: 5px;
padding: 10px 15px;
background-color: #0070f3;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
/* Form Elements */
label {
display: block;
margin-top: 15px;
font-weight: bold;
}
input,
textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ddd;
border-radius: 5px;
box-sizing: border-box;
font-size: 1rem;
outline: none;
transition: border-color 0.3s ease;
}
input:focus,
textarea:focus {
border-color: #0070f3;
}
/* Error Messages */
form p {
color: red;
font-size: 0.9rem;
margin-top: 5px;
}
/* General Layout */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
blog-app\styles\Header.module.css
/* styles/Header.module.css */
/* Header container with a lighter maroon background */
.header {
width: 100%;
padding: 15px 20px;
background-color: #7a2c34; /* Lighter maroon */
border-bottom: 1px solid #ddd;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Navigation container */
.nav {
display: flex;
justify-content: center;
gap: 20px;
}
/* Link styling */
.navLink {
font-size: 1.2rem;
color: #ffffff;
text-decoration: none;
padding: 8px 15px;
border-radius: 5px;
font-weight: 500;
transition: transform 0.2s ease, background-color 0.3s ease, font-weight 0.2s ease;
}
/* Hover effect with bold white text and pop-out animation */
.navLink:hover {
color: #ffffff;
font-weight: 700; /* Increased boldness on hover */
background-color: rgba(255, 255, 255, 0.2);
transform: scale(1.2); /* Pop-out effect */
}
/* Active link styling */
.active {
border: 2px solid #ffffff;
border-radius: 5px;
}
blog-app\styles\index.module.css
/* styles/index.module.css */
/* Center the container and apply padding */
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 20px;
}
/* Center the main header */
.header {
font-size: 3rem;
font-weight: bold;
color: #4b1e24; /* Dark maroon for the header */
margin-bottom: 30px;
}
/* Posts container for grid layout */
.postsContainer {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
width: 100%;
max-width: 1200px;
}
/* Pagination container with centered buttons */
.paginationContainer {
margin-top: 30px;
display: flex;
gap: 15px;
justify-content: center;
}
/* Styled pagination button */
.paginationButton {
padding: 12px 24px;
background-color: #7a2c34; /* Maroon button color */
color: white;
font-size: 1.1rem;
font-weight: bold;
border: none;
border-radius: 25px; /* Fully rounded button */
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
/* Hover effect for pagination button */
.paginationButton:hover {
background-color: #5e1f28; /* Darker maroon on hover */
transform: scale(1.05); /* Pop-out effect */
}
/* Disabled button styling */
.paginationButton:disabled {
background-color: #ccc;
color: #888;
cursor: not-allowed;
transform: none;
}
blog-app\styles\post.module.css
/* styles/post.module.css */
/* Container with padding and max-width */
.container {
max-width: 800px;
margin: 40px auto;
padding: 30px;
background-color: #ffffff;
border-radius: 10px;
border: 1px solid #7a2c34; /* Maroon border */
box-shadow: 0 4px 15px rgba(122, 44, 52, 0.1); /* Soft maroon shadow */
}
/* Title styling */
.title {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 20px;
color: #7a2c34; /* Maroon title color */
text-align: center;
transition: color 0.3s ease;
}
/* Title hover effect */
.container:hover .title {
color: #5e1f28; /* Darker maroon on hover */
}
/* Author styling */
.author {
font-size: 1.2rem;
margin-bottom: 5px;
color: #4b1e24; /* Dark maroon for author */
text-align: center;
font-weight: bold;
}
/* Date styling */
.date {
color: #555;
font-size: 0.9rem;
margin-bottom: 20px;
text-align: center;
}
/* Body text styling */
.body {
font-size: 1.2rem;
line-height: 1.8;
text-align: justify;
color: #4b1e24; /* Dark maroon for body text */
}
blog-app\styles\Tile.module.css
/* styles/Tile.module.css */
/* Tile container with rounded border and shadow */
.tile {
background-color: #ffffff;
border: 1px solid #7a2c34; /* Maroon border to match the theme */
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 10px rgba(122, 44, 52, 0.1); /* Soft maroon shadow */
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
overflow: hidden;
}
/* Tile hover effect with maroon shadow */
.tile:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(122, 44, 52, 0.2);
}
/* Title inside the tile */
.title {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 10px;
color: #7a2c34; /* Maroon title color */
transition: color 0.3s ease;
}
/* Title hover effect */
.tile:hover .title {
color: #5e1f28; /* Darker maroon on hover */
}
/* Author and date styles */
.author {
font-size: 1rem;
color: #4b1e24; /* Dark maroon for author */
margin-bottom: 5px;
}
/* Date styling */
.date {
color: #555;
font-size: 0.9rem;
}
blog-app\src\apolloClient.ts
// src/apolloClient.ts
import { ApolloClient, InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
uri: 'http://localhost:4000/', // Replace with your GraphQL server URL
cache: new InMemoryCache(),
});
export default client;
blog-app\pages\index.tsx
// pages/index.tsx
import { GET_POSTS } from '@/graphql/queries';
import { useQuery } from '@apollo/client';
import { useState } from 'react';
import Tile from '@/components/Tile';
import Header from '@/components/Headers';
import styles from '@/styles/index.module.css';
interface Post {
id: string;
title: string;
author: string;
publishedDate: string;
}
const HomePage = () => {
const [page, setPage] = useState(1);
const { data, loading, error } = useQuery(GET_POSTS, {
variables: { page, limit: 5 },
});
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
const handlePrevious = () => setPage((prev) => Math.max(prev - 1, 1));
const handleNext = () => setPage((prev) => prev + 1);
return (
<div>
<Header />
<div className={styles.container}>
<h1 className={styles.header}>Blog Posts</h1>
<div className={styles.postsContainer}>
{data.posts.map((post: Post) => (
<Tile
key={post.id}
id={post.id}
title={post.title}
author={post.author}
publishedDate={post.publishedDate}
/>
))}
</div>
<div className={styles.paginationContainer}>
<button
className={styles.paginationButton}
onClick={handlePrevious}
disabled={page === 1}
>
Previous
</button>
<button className={styles.paginationButton} onClick={handleNext}>
Next
</button>
</div>
</div>
</div>
);
};
export default HomePage;
blog-app\pages\create.tsx
// pages/create.tsx
import { useForm } from 'react-hook-form';
import { useRouter } from 'next/router';
import { useMutation } from '@apollo/client';
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
import { CREATE_POST } from '@/graphql/mutations';
import { GET_POSTS } from '@/graphql/queries';
import Header from '@/components/Headers';
import styles from '@/styles/create.module.css';
interface FormData {
title: string;
body: string;
author: string;
}
const schema = yup.object().shape({
title: yup
.string()
.min(5, 'Title must be at least 5 characters long')
.max(100, 'Title cannot exceed 100 characters')
.required('Title is required'),
body: yup
.string()
.min(20, 'Body must be at least 20 characters long')
.max(5000, 'Body cannot exceed 5000 characters')
.required('Body is required'),
author: yup
.string()
.min(3, 'Author name must be at least 3 characters long')
.max(50, 'Author name cannot exceed 50 characters')
.required('Author is required'),
});
export default function CreatePost() {
const router = useRouter();
const [createPost] = useMutation(CREATE_POST, {
update(cache, { data: { createPost } }) {
try {
// Attempt to read the existing posts from the cache
const existingPosts: any = cache.readQuery({
query: GET_POSTS,
variables: { page: 1, limit: 5 },
});
// If existingPosts exists, update the cache; otherwise, add the new post
cache.writeQuery({
query: GET_POSTS,
variables: { page: 1, limit: 5 },
data: {
posts: existingPosts ? [createPost, ...existingPosts.posts] : [createPost],
},
});
} catch (error) {
console.error('Error updating cache:', error);
}
},
});
const {
register,
handleSubmit,
formState: { errors, isSubmitting },
} = useForm<FormData>({
resolver: yupResolver(schema),
});
const onSubmit = async (data: FormData) => {
try {
await createPost({
variables: data,
optimisticResponse: {
createPost: {
__typename: 'Post',
id: 'temp-id',
title: data.title,
body: data.body,
author: data.author,
publishedDate: new Date().toISOString(),
},
},
});
router.push('/');
} catch (err) {
console.error('Error creating post:', err);
}
};
return (
<div className={styles.outerContainer}>
<Header />
<div className={styles.container}>
<h1 className={styles.header}>Create a New Blog Post</h1>
<p className={styles.description}>
Fill in the details below to create a new blog post.
</p>
<form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
<div className={styles.formGroup}>
<label className={styles.label}>Title</label>
<input
className={`${styles.input} ${errors.title ? styles.errorInput : ''}`}
{...register('title')}
placeholder="Enter the blog title"
/>
{errors.title && <p className={styles.error}>{errors.title.message}</p>}
</div>
<div className={styles.formGroup}>
<label className={styles.label}>Body</label>
<textarea
className={`${styles.textarea} ${errors.body ? styles.errorInput : ''}`}
{...register('body')}
placeholder="Write your blog content here..."
/>
{errors.body && <p className={styles.error}>{errors.body.message}</p>}
</div>
<div className={styles.formGroup}>
<label className={styles.label}>Author</label>
<input
className={`${styles.input} ${errors.author ? styles.errorInput : ''}`}
{...register('author')}
placeholder="Enter the author's name"
/>
{errors.author && <p className={styles.error}>{errors.author.message}</p>}
</div>
<button className={styles.button} type="submit" disabled={isSubmitting}>
{isSubmitting ? 'Submitting...' : 'Submit Post'}
</button>
</form>
</div>
</div>
);
}
blog-app\pages_document.tsx
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html lang="en">
<Head />
<body className="antialiased">
<Main />
<NextScript />
</body>
</Html>
);
}
blog-app\pages_app.tsx
// pages/_app.tsx
import { ApolloProvider } from '@apollo/client';
import client from '@/src/apolloClient';
import '../styles/globals.css';
function MyApp({ Component, pageProps }: any) {
return (
<ApolloProvider client={client}>
<Component {...pageProps} />
</ApolloProvider>
);
}
export default MyApp;
blog-app\pages\posts[id].tsx
// pages/posts/[id].tsx
import { GetStaticPaths, GetStaticProps } from 'next';
import { useRouter } from 'next/router';
import client from '@/src/apolloClient';
import { GET_POST, GET_POSTS } from '@/graphql/queries';
import Header from '../../components/Headers';
import styles from '@/styles/post.module.css';
interface PostProps {
post: {
id: string;
title: string;
body: string;
author: string;
publishedDate: string;
};
}
export const getStaticPaths: GetStaticPaths = async () => {
const { data } = await client.query({
query: GET_POSTS,
variables: { page: 1, limit: 100 },
});
const paths = data.posts.map((post: any) => ({
params: { id: post.id },
}));
return { paths, fallback: 'blocking' };
};
export const getStaticProps: GetStaticProps = async ({ params }) => {
try {
const { data } = await client.query({
query: GET_POST,
variables: { id: params?.id },
});
if (!data.post) {
return { notFound: true };
}
return {
props: {
post: data.post,
},
revalidate: 10, // ISR: Revalidate every 10 seconds
};
} catch (error) {
return { notFound: true };
}
};
export default function PostPage({ post }: PostProps) {
const router = useRouter();
if (router.isFallback) {
return <div>Loading...</div>;
}
return (
<div>
<Header />
<div className={styles.container}>
<h1 className={styles.title}>{post.title}</h1>
<p className={styles.author}>By {post.author}</p>
<p className={styles.date}>
{new Date(post.publishedDate).toLocaleDateString()}
</p>
<p className={styles.body}>{post.body}</p>
</div>
</div>
);
}
blog-app\graphql\mutations.ts
import { gql } from '@apollo/client';
export const CREATE_POST = gql`
mutation CreatePost($title: String!, $body: String!, $author: String!) {
createPost(title: $title, body: $body, author: $author) {
id
title
publishedDate
}
}
`;
blog-app\graphql\queries.ts
import { gql } from '@apollo/client';
export const GET_POSTS = gql`
query GetPosts($page: Int, $limit: Int) {
posts(page: $page, limit: $limit) {
id
title
publishedDate
}
}
`;
export const GET_POST = gql`
query GetPost($id: ID!) {
post(id: $id) {
id
title
body
author
publishedDate
}
}
`;
blog-app\components\Headers.tsx
// components/Header.tsx
import Link from 'next/link';
import { useRouter } from 'next/router';
import styles from '@/styles/Header.module.css';
const Header = () => {
const router = useRouter();
return (
<header className={styles.header}>
<nav className={styles.nav}>
<Link href="/" className={`${styles.navLink} ${router.pathname === '/' ? styles.active : ''}`}>
Home
</Link>
<Link href="/create" className={`${styles.navLink} ${router.pathname === '/create' ? styles.active : ''}`}>
Create
</Link>
</nav>
</header>
);
};
export default Header;
blog-app\components\Tile.tsx
// components/Tile.tsx
import Link from 'next/link';
import styles from '@/styles/Tile.module.css';
interface TileProps {
id: string;
title: string;
author: string;
publishedDate: string;
}
const Tile = ({ id, title, publishedDate }: TileProps) => {
return (
<div className={styles.tile}>
<Link href={`/posts/${id}`}>
<h2 className={styles.title}>{title}</h2>
<p className={styles.date}>
{new Date(publishedDate).toDateString()}
</p>
</Link>
</div>
);
};
export default Tile;
# **Next.js Blog Application with GraphQL**
This is a simple blog application built using **Next.js**, **GraphQL**, and **Apollo Client**. The app allows users to view a list of blog posts, read individual posts, and create new posts. The project demonstrates clean code, efficient use of GraphQL queries and mutations, proper error handling, form validation, and Next.js features like **Incremental Static Regeneration (ISR)**.
---
## **Features**
1. **Homepage**: Displays a list of blog posts with title, author, and published date.
2. **Post Details Page**: Clicking on a post navigates to a detailed page showing the full post (title, body, author, and published date).
3. **Create Post Page**: Provides a form to submit a new blog post. The form includes validation for title, body, and author fields.
4. **Pagination**: Implements pagination on the homepage, showing 5 posts per page.
5. **GraphQL Integration**:
- **Fetch posts with pagination**.
- **Fetch individual post by ID**.
- **Submit a new post** using GraphQL mutations.
6. **Incremental Static Regeneration (ISR)**:
- ISR is used on the post details page to revalidate content every 10 seconds.
7. **Optimistic UI Updates**: When a new post is submitted, it appears immediately on the homepage without waiting for a server response.
8. **Form Validation**: Form validation is implemented using **Yup** and **react-hook-form**.
---
## **Tech Stack**
- **Frontend**: Next.js, TypeScript
- **Backend**: Apollo Server, Node.js, GraphQL
- **State Management**: Apollo Client
- **Form Handling**: react-hook-form, Yup
- **Styling**: CSS Modules
- **Database**: In-memory data (for demonstration purposes)
---
## **Project Setup**
### **Prerequisites**
- **Node.js** (>= 14.x)
- **npm** or **yarn**
---
### **Steps to Run the Project Locally**
1. **Clone the repository**:
```bash
git clone https://github.com/Affan-Moiz/NextjsBlogWithGraphQL.git
cd NextjsBlogWithGraphQL
```
2. **Install dependencies**:
```bash
cd blog-app
npm install
cd ..
cd blog-backend
npm install
```
3. **Run the GraphQL backend**:
- Navigate to the backend directory:
```bash
cd blog-backend
```
- Start the backend server:
```bash
node index.js
```
- The backend will run at `http://localhost:4000/`.
4. **Start the Next.js frontend**:
- Navigate back to the frontend project directory:
```bash
cd ../blog-app
```
- Start the frontend development server:
```bash
npm run dev
```
- The app will be available at `http://localhost:3000/`.
---
## **Architectural Decisions**
1. **GraphQL Backend**:
- The backend is implemented using **Apollo Server** and provides GraphQL endpoints for fetching and submitting blog posts.
- The data is stored in an in-memory array for simplicity. This can be replaced with a real database (e.g., MongoDB, PostgreSQL) if needed.
2. **Apollo Client for State Management**:
- Apollo Client is used on the frontend for state management and interacting with the GraphQL API.
- It simplifies data fetching, caching, and updating the UI in response to GraphQL queries and mutations.
3. **Incremental Static Regeneration (ISR)**:
- ISR is used on the post details page (`posts/[id].tsx`) to ensure that static pages are updated every 10 seconds if new content is added.
- This improves both performance and SEO by serving pre-rendered pages while keeping them fresh.
4. **Optimistic UI Updates**:
- When a user submits a new post, an **optimistic response** is provided to Apollo Client. This ensures that the new post appears immediately on the homepage without waiting for the server to respond, enhancing the user experience.
5. **Error Handling**:
- Proper error handling is implemented in all GraphQL queries and mutations to display meaningful error messages to users.
- The app gracefully handles scenarios where data might not be available (e.g., empty cache, failed API requests).
6. **Form Validation**:
- Form validation is implemented using **Yup** and **react-hook-form**, ensuring that users provide valid inputs when creating a new post.
- The form fields are validated for minimum and maximum length, and appropriate error messages are displayed.
---
## **Evaluation Criteria**
1. **Clean, maintainable, and well-structured code**:
- The project follows best practices for code organization and structure.
- Components are modular and reusable.
2. **Proper use of Next.js and GraphQL**:
- Next.js is used for server-side rendering, static generation, and ISR.
- GraphQL is used for efficient data fetching and manipulation.
3. **Efficiency and accuracy of GraphQL queries and mutations**:
- Queries are optimized with pagination support.
- Mutations include cache updates and optimistic UI updates.
4. **Attention to UI/UX (simple but functional)**:
- The UI is clean, responsive, and user-friendly.
- CSS Modules are used for component-level styling.
5. **Understanding of Next.js features like SSR/ISR**:
- SSR is used for dynamic data fetching.
- ISR is implemented for revalidating static pages.
6. **Proper error handling and validation**:
- Error handling is implemented for both queries and mutations.
- Form validation ensures that users provide correct inputs.
7. **Well-documented code**:
- The code is well-commented and easy to understand.
- This README file provides clear instructions for setting up and running the project locally.
---
## **Folder Structure**
The main folder contains two subfolders:
1. **`blog-app`**: Contains the Next.js frontend code.
2. **`blog-backend`**: Contains the Node.js backend code with Apollo Server.
---
## **Repository**
The GitHub repository for this project is available at:
[https://github.com/Affan-Moiz/NextjsBlogWithGraphQL.git](https://github.com/Affan-Moiz/NextjsBlogWithGraphQL.git)
---
## **Public GraphQL Endpoint (if applicable)**
Currently, the GraphQL backend runs locally at `http://localhost:4000/`. You can replace this with a public GraphQL endpoint if needed.
---
## **Screenshots**
1. **Homepage**
Displays a list of blog posts with pagination.
2. **Post Details Page**
Shows the full content of a selected blog post.
3. **Create Post Page**
Allows users to submit a new blog post with validation.
---
## **Future Improvements**
1. Replace the in-memory backend with a real database (e.g., MongoDB, PostgreSQL).
2. Implement additional features such as search and filtering.
3. Enhance UI/UX with better design and animations.
---
## **License**
This project is licensed under the MIT License.Last updated
Was this helpful?
