Fetch and Create Posts using Client and Server Component

Nemesis Blog

·

Follow

4 min read

·

Jan 19, 2025

--

Share

For GraphQL Server with Apollo you can check on this story

For Video version check this

Prerequisite

1. NextJS App Router
2. Apollo Client

Installation

npx create-next-app@latest
npm install @apollo/client graphql

Build UI

• Create new page inside /app/posts/page.tsx

import Posts from "./posts";
import AddPost from "./form";

export default async function Page() {
  return (
    <main className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-700 p-10">
      <div className="w-1/2 mx-auto">
        <AddPost/>
        <Posts/>
      </div>
    </main>
  )
}

• Create component AddPost inside /app/posts/form.tsx

"use client"

import { useState } from "react"

export default function AddPost() {
  const [title, setTitle] = useState("");
  const [content, setContent]…