🚀 GraphQL Hello World

A simple GraphQL application to understand how GraphQL works end-to-end. Learn GraphQL by clicking buttons and seeing real queries and mutations in action!

✨ Features

• 🎯 TypeScript backend with Apollo Server
• 🌐 Express server
• 💾 Mock database with sample data (featuring dog names!)
• 🖱️ Simple HTML/JS frontend (no React)
• 🔘 Interactive buttons to fetch data via GraphQL queries
• ✏️ Create mutations with form inputs
• 🎮 GraphQL Playground access for custom queries

🚀 Getting Started

Install Dependencies

npm install

Run the Development Server

npm run dev

The server will start on http://localhost:4000

Open the Frontend

Navigate to http://localhost:4000 in your browser to use the interactive UI, or visit http://localhost:4000/graphql for the GraphQL Playground.

📁 Project Structure

.
├── src/                    # TypeScript server code
│   ├── server.ts          # Main Express + Apollo Server
│   ├── schema.ts          # GraphQL schema definition
│   ├── resolvers.ts       # Query & mutation resolvers
│   └── database.ts        # Mock in-memory database
├── client/                 # Frontend
│   └── index.html         # Interactive UI with buttons
├── dist/                   # Compiled JavaScript (generated)
└── vercel.json            # Vercel deployment config

🔍 GraphQL Operations

Queries (Read Data)

• users - Get all users
• user(id: ID!) - Get a specific user by ID
• posts - Get all posts with author information
• post(id: ID!) - Get a specific post

Mutations (Write Data)

• createUser(name: String!, email: String!) - Create a new user
• createPost(title: String!, content: String!, authorId: ID!) - Create a new post

Example Query

query {
  user(id: "1") {
    id
    name
    email
    posts {
      id
      title
      content
    }
  }
}

🌐 Deployment

This project is configured for easy deployment to Vercel:

npm install -g vercel
vercel

Or connect your GitHub repo to Vercel for automatic deployments.

🎓 Learning Resources

This project demonstrates:

• ✅ GraphQL schema definition with types
• ✅ Resolvers for queries and mutations
• ✅ Nested data fetching (users with posts)
• ✅ Variables in GraphQL mutations
• ✅ Frontend integration without a GraphQL client library

📝 License

MIT