TodayTools

GraphQL flashcards

Ask for exactly the data you need, in one request.

Donate
Beginner friendly, starts from zero
Section
How to study
0
GraphQLStart from zero · 1 of 12

What is GraphQL, in one plain sentence?

A way for an app to ask a for exactly the data it needs, in one request, and get back just that and nothing more.

Ask for what you want, get what you asked for.

All topics

GraphQL at a glance

GraphQL lets an app ask a server for exactly the data one screen needs, in a single request.

Like a restaurant order form where you tick exactly what you want, instead of choosing a fixed combo meal.

Words you will meet

Client
The app or web page that asks for data
Server
The computer that holds the data and answers requests
Schema
The full menu of everything you are allowed to ask for
Field
One detail of a thing, like an order's status
Query
A request that reads data
Mutation
A request that changes data, like placing an order
Argument
An extra detail you pass, like which order id you want
Null
A special value that means there is nothing here

The steps

  1. 1. Start from zero (12 cards): What GraphQL is, the problem it solves and the words you need, in plain English.
  2. 2. Core basics (15 cards): Schemas, types, queries, mutations, variables and resolvers.
  3. 3. Next steps (15 cards): Inputs, enums, fragments, abstract types, errors, context and pagination.
  4. 4. Go deeper (16 cards): N+1, cost limits, persisted queries, caching, auth, federation and evolution.
All 12 cards in Start from zero
What is GraphQL, in one plain sentence?
A way for an app to ask a server for exactly the data it needs, in one request, and get back just that and nothing more.
Before GraphQL, what was annoying about getting data for one screen?
Apps often called several web addresses, one for the order, one for the customer, one for the items. Each sent back fixed data: too much you did not need, or too little so you had to ask again.
Where might you already meet GraphQL without seeing it?
In big apps and sites: GitHub and Shopify offer GraphQL for developers, and many shopping, social and news apps use it to fill their screens.
What is a good everyday picture of how GraphQL works?
A restaurant order form where you tick exactly what you want, instead of fixed combo meals. The kitchen sends back only the ticked items, on one tray.
What are a client, a server, an API and an endpoint?
The client is the app that asks, like a phone app or web page. The server is the computer that answers. The API is the agreed way they talk, and an endpoint is the web address it listens on.
What is JSON, the format the answers come back in?
JSON writes data as name and value pairs inside curly braces. Here the name name has the value Vikram, and city has the value Pune.
What are a schema, a type and a field?
The schema is the full menu of what you can ask for. A type is one kind of thing on it, like Order. A field is one detail of that thing, like its status or total.
What is the difference between a query and a mutation?
A query reads data, like "show my orders". A mutation changes data, like "place this order" or "update my phone number".
What do null, an argument and a variable mean?
Null means "no value here". An argument is an extra detail you pass, like which order id you want. A variable is a named blank, like $id, that you fill in separately.
What do you need before you start?
Just a browser. Many GraphQL servers have a free playground page where you type a query on the left and see the answer on the right. Nothing to install.
Your first tiny win: what does this query ask for?
This query asks for one user, using the argument id to say which one, and asks for just one field, name. The answer comes back as JSON with only the name.
What will you be able to do after this topic?
Read a GraphQL schema, write queries and mutations with variables, understand answers and errors, and see how a server finds each field's data.
GraphQL cheatsheet

Schema (SDL)

  • type Order { id: ID! total: Int! } Object type
  • [Item!]! Non-null list of non-null items
  • input PlaceOrderInput { ... } Argument object
  • input UserBy @oneOf { id: ID email: String } Exactly one field
  • enum Status { PAID SHIPPED } Fixed set of values
  • interface Node { id: ID! } Shared fields
  • union SearchResult = A | B One of several types
  • scalar DateTime Custom scalar

Operations

  • query Name($id: ID!) { ... } Named query with a variable
  • mutation { placeOrder(input: {...}) { ... } } Write
  • subscription { messageAdded { ... } } Server push
  • fragment Card on Product { ... } Reusable fields
  • ...Card Spread a fragment
  • ... on Product { name } Inline fragment for a type
  • left: product(id: 1) { ... } Alias
  • __typename Concrete type of an object

Directives

  • @include(if: $flag) Keep field if true
  • @skip(if: $flag) Drop field if true
  • @deprecated(reason: "Use name") Mark for removal
  • @oneOf Exactly one input field (spec 2025)
  • @specifiedBy(url: "...") Document a custom scalar
  • ... @defer Stream later (proposal)
  • @key(fields: "id") Federation entity

Server hardening

  • DataLoader per request Batch and fix N+1
  • depthLimit(8) Cap nesting
  • maximumComplexity: 1000 Cap query cost
  • first: Int! (max 100) Bounded lists
  • Trusted documents Allow-list known operations
  • introspection: false Hide schema on private APIs
  • formatError Mask internal errors
  • extensions.code Machine-readable error code

Transport

  • POST /graphql {query, variables, operationName} Standard request
  • GET /graphql?query=...&variables=... Cacheable queries only
  • Accept: application/graphql-response+json GraphQL over HTTP media type
  • extensions.persistedQuery.sha256Hash Persisted query by hash
  • graphql-ws / SSE Subscription transports
Donate