GraphQL Full-Stack Practice 🚀

A full-stack demonstration project connecting a React frontend to a Node.js/Express backend using GraphQL and the Apollo ecosystem.

This repository serves as a practical example of how to implement GraphQL schemas, resolvers, and data relationships, and how to consume that API efficiently on the client side.

🌟 Features

• Apollo Server v4: Implemented with Express middleware.
• Nested Resolvers: Demonstrates how to fetch related data (joining Users into Todos) efficiently on the server.
• Apollo Client: React integration using ApolloProvider and the useQuery hook.
• Mock Data: Uses in-memory data structures to simulate a database.
• Clean Architecture: Separation of concerns between Client and Server.

🛠️ Tech Stack

Server Side

• Runtime: Node.js
• Framework: Express.js
• GraphQL: @apollo/server, graphql
• Utilities: cors, body-parser, axios

Client Side

• Framework: React (Create React App)
• State Management: @apollo/client
• Styling: CSS

📂 Project Structure

The repository is organized as a monorepo containing both the frontend and backend:

graphql-practice/
├── client/         # React Frontend Application
│   ├── public/
│   └── src/
│       ├── App.js  # Main component with GraphQL Query
│       └── ...
├── server/         # Node.js Backend API
│   ├── index.js    # Entry point & Apollo Server setup
│   ├── todo.js     # Mock Todo data
│   └── user.js     # Mock User data
└── README.md