What is the difference between client-side and server-side GraphQL?
Understand the difference between client-side and server-side GraphQL: schema and resolvers on the server, query composition and caching on the client.
Expected Interview Answer
Server-side GraphQL is the backend layer that defines the schema and resolvers and executes queries against real data sources, while client-side GraphQL is the frontend layer that builds queries, sends them, and manages the returned data and cache.
The server owns the type system, validates incoming operations, resolves each field from databases or services, and returns shaped JSON. The client — using libraries like Apollo Client, urql, or Relay — composes queries and mutations, handles loading and error state, caches responses, and re-renders the UI. They meet at a single HTTP (or WebSocket) endpoint speaking the GraphQL protocol, so neither side needs to know the other's internals.
- Clear separation of data resolution vs. presentation
- Server enforces schema and security in one place
- Client optimizes fetching, caching, and UI state
- Both communicate through one typed contract
- Each side can evolve independently behind the schema
AI Mentor Explanation
The server-side is the pitch and the umpires: it holds the actual game state, enforces the laws, and rules on every appeal, while the client-side is the broadcast team requesting specific stats and displaying them on screen. Commentators never touch the pitch — they ask for data and present it, just as a GraphQL client requests and renders without resolving fields itself.
Step-by-Step Explanation
Step 1
Server defines the schema
Types, queries, mutations, and subscriptions are declared as the contract on the backend.
Step 2
Server writes resolvers
Each field maps to a resolver that fetches from databases, services, or other APIs.
Step 3
Client composes an operation
The frontend writes a query or mutation asking only for the fields it needs.
Step 4
Operation travels over the endpoint
The client sends it via HTTP POST (or WebSocket for subscriptions) to the single GraphQL URL.
Step 5
Client handles the result
It manages loading/error state, caches the response, and renders the UI.
What Interviewer Expects
- Server owns schema, validation, and resolvers
- Client composes queries and manages cache/UI state
- Both communicate over a single typed endpoint
- Understanding that the schema is the shared contract
- Examples of client libraries (Apollo, urql, Relay) vs server frameworks
Common Mistakes
- Thinking GraphQL is only a frontend technology
- Believing the client resolves fields from the database
- Confusing the client cache with the server data source
- Assuming multiple REST-style endpoints instead of one
- Mixing up schema definition (server) with query definition (client)
Best Answer (HR Friendly)
“Server-side GraphQL is the backend that defines what data exists and knows how to fetch it. Client-side GraphQL is the app that asks for the exact data it needs and displays it. They talk through one shared endpoint, keeping data logic and the user interface neatly separated.”
Code Example
// Server (Node + @apollo/server)
const typeDefs = `#graphql
type User { id: ID!, name: String! }
type Query { user(id: ID!): User }
`
const resolvers = {
Query: {
// Resolves the field from a real data source
user: (_parent, { id }, { db }) => db.users.findById(id),
},
}// Client (React + @apollo/client)
import { gql, useQuery } from '@apollo/client'
const GET_USER = gql`
query GetUser($id: ID!) {
user(id: $id) { id name }
}
`
function Profile({ id }) {
const { data, loading, error } = useQuery(GET_USER, { variables: { id } })
if (loading) return 'Loading...'
if (error) return 'Error'
return data.user.name
}Follow-up Questions
- Which side is responsible for authorization and why?
- How do subscriptions change the transport between client and server?
- Can a client over-fetch if the server schema exposes too much?
- Where does query validation happen and against what?
MCQ Practice
1. Which side defines the GraphQL schema and resolvers?
The server owns the schema and resolvers; the client only composes operations against it.
2. What does client-side GraphQL primarily handle?
Clients build queries, cache responses, and drive UI state; data resolution stays on the server.
3. How do client and server typically communicate?
GraphQL exposes one endpoint that the client posts operations to.
Flash Cards
What does server-side GraphQL own? — The schema, validation, and resolvers that fetch real data.
What does client-side GraphQL own? — Composing operations, caching, and UI/loading/error state.
How do they communicate? — Through a single typed GraphQL endpoint over HTTP or WebSocket.
Name client libraries. — Apollo Client, urql, Relay.
What is the shared contract? — The GraphQL schema that defines everything a client can request.