Apollo Server creates a GraphQL API in minutes. Apollo Client caches, normalizes, and syncs data on the frontend.
Why GraphQL over REST
REST: you get what the server decides. Need user + posts + comments? Three requests. Or one endpoint that returns everything (over-fetching).
GraphQL: you ask for exactly what you need, in one request.
query {
user(id: "123") {
name
email
posts(last: 5) {
title
comments {
text
author { name }
}
}
}
}
One request. Exactly the fields you need. No over-fetching. No under-fetching.
Apollo Server (Backend)
import { ApolloServer } from '@apollo/server';
const typeDefs = `
type User {
id: ID!
name: String!
posts: [Post!]!
}
type Post {
id: ID!
title: String!
author: User!
}
type Query {
user(id: ID!): User
posts: [Post!]!
}
`;
const resolvers = {
Query: {
user: (_, { id }) => db.users.findById(id),
posts: () => db.posts.findAll(),
},
User: {
posts: (user) => db.posts.findByAuthor(user.id),
},
};
const server = new ApolloServer({ typeDefs, resolvers });
Apollo Client (Frontend)
import { useQuery, gql } from '@apollo/client';
const GET_USER = gql`
query GetUser($id: ID!) {
user(id: $id) {
name
posts { title }
}
}
`;
function UserProfile({ id }) {
const { loading, data } = useQuery(GET_USER, { variables: { id } });
if (loading) return <Spinner />;
return <h1>{data.user.name}</h1>;
}
Normalized cache — Apollo Client caches entities by ID. Update a user anywhere, it updates everywhere.
Optimistic updates — show changes immediately, sync with server in background.
DevTools — browser extension to inspect cache, queries, and mutations.
Quick Start
npm i @apollo/server graphql
npm i @apollo/client graphql # frontend
If your frontend fetches data from multiple endpoints and reshapes it — GraphQL eliminates that complexity.
Need web scraping or data extraction? Check out my tools on Apify — get structured data from any website in minutes.
Custom solution? Email spinov001@gmail.com — quote in 2 hours.
Top comments (0)