DEV Community

Alex Spinov
Alex Spinov

Posted on

Apollo GraphQL Has a Free Server and Client for Type-Safe API Development

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 }
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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 });
Enter fullscreen mode Exit fullscreen mode

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>;
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)