Member-only story

GraphQL Client with Apollo GraphQL and NextJS App Router (TypeScript)

Fetch and Create Posts using Client and Server Component

Nemesis Blog
4 min readJan 19, 2025
Preview

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]…

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

No responses yet

What are your thoughts?