Playground API
DocsStatsBlogStudio
Documentation Tree
Technical BlogFeature Deep Dives
  • Introduction
  • Quickstart
    5 min
  • How It Works
  • Recipes & Cookbooks
  • Platform Comparisons
  • Real-World Showcase
  • Interactive Studio
    Studio
  • GraphiQL IDE
    IDE
  • Session Quotas & Activity
  • Network Chaos Simulator
  • Atomic Sandbox Reset
  • Overview & Models
    Hub
  • Users Resource
  • Posts Resource
  • Comments Resource
  • Todos Resource
  • Custom Collections
    Custom
  • Multipart File Uploads
    Upload
  • Dynamic SVG Avatars
    SVG
  • Image Thumbnails
    CDN
  • Relational Filtering
  • Full-Text Search
  • Dynamic Sorting
  • Offset Pagination
  • Cursor Pagination
    Scroll
  • CSV & Excel Export & Import
    IO
  • Custom Collections
    CRUD
  • Overview & Architecture
    Hub
  • JWT Auth Flow
  • Refresh Token Rotation
    Mutex
  • RBAC Permission Matrix
    Roles
  • Expiry Simulation
  • Clock Skew Drift
  • Password Recovery Loop
  • Dual-Mode Sandboxing
  • GraphiQL IDE
    IDE
  • Relational Queries
  • Stateful Mutations
  • Realtime Subscriptions
  • Overview & Flowcharts
    Hub
  • Hosted Checkout
    Stripe
  • Payment Intents API
  • 3DS Challenge Modal
    Modal
  • Customers Vault
  • Charges & Refunds
  • Test Cards Catalog
  • Overview & Channels
    Hub
  • Virtual Email Mailbox
    Mailtrap
  • Virtual SMS Terminal
    Phone
  • In-App Notifications
  • Message Dispatcher
  • Realtime Studio
    Studio
  • Native WebSocket (/ws)
  • Socket.io Gateway
  • Presence & Echo Bot
  • Server-Sent Events (SSE)
    SSE
  • Analytics Telemetry
  • Webhook Subscriptions
  • HMAC SHA-256 Signatures
  • Delivery Logs
  • Manual Retry Simulator
  • Network Latency Delay
  • HTTP Status Codes
  • Rate-Limit Simulator
    429
  • Flaky Network & Jitter
    Chaos
  • Session Quotas & Activity
  • JSON Snapshots
    JSON
  • Headless CI/CD Testing
    CI
  • Mobile QR Code Sync
  • System Metrics & Health
  • Atomic Sandbox Reset
  • Official TypeScript SDK
  • Multi-Language Generators
  • DevTools Extension
  • OpenAPI 3.1 Spec
    JSON
  • Postman Collection v2.1
  • Bruno Collection
  • Insomnia Workspace
  • TypeScript .d.ts
    .d.ts
  • AI Prompt Rules
    Rules
  • Context Index (llms.txt)
  • Full Schema (llms-full.txt)
  • Manifest (product.json)
  • All Feature Articles
    Blog
  • React CRUD Without Backend
    Deep Dive
  • Why Static APIs Fail
  • Mocking Stateful Auth
  • WebSockets & SSE Guide
Technical Blog
Articles

In-depth articles explaining stateful mock APIs, WebSockets, payments, and frontend resilience.

Read Articles
PreviousRelational Queries
NextRealtime Subscriptions
GraphQL Gateway

Stateful GraphQL Mutations

Execute mutations to create, modify, and delete resources with genuine persistence. Mutations are committed directly to your visitor sandbox overlay, immediately visible across subsequent GraphQL queries and REST endpoints.

Interactive Mutation Workbench

Select an operational mutation preset below to load variables and execute state changes against your session:

Execute Mutation: createPost

POST
response.json
1
{
2
// Click "Send" above to execute this request against the live server.
3
}

Sandbox Overlay Architecture

How Playground API achieves 100% deterministic state mutation without database pollution:

01

Session Identity Mapping

Every request carries a cryptographic pg_identity cookie or header. Mutations are isolated to your sandbox UUID.

02

Copy-on-Write Delta Records

New records and field patches are stored as overlay deltas in Postgres. Base seed records remain intact for other developers.

03

Dual-Gateway Synchronization

Create a post in GraphQL, then fetch it via GET /api/v1/posts. State synchronizes across both protocols instantly.

Supported Mutation Signatures

Available mutation operations implemented in the Playground API GraphQL gateway:

MutationInput ArgumentsReturn TypePersistence Effect
createPosttitle: String!, body: String, userId: IDPostInserts post into session delta, assigns auto-increment ID.
updatePostid: ID!, title: String, body: StringPostMerges modifications over base seed or previously created post.
deletePostid: ID!BooleanMarks post as tombstoned for the current session.
createCommentpostId: ID!, name: String!, email: String!, body: String!CommentCreates comment attached to post and triggers subscription stream.
createTodotitle: String!, userId: ID, completed: BooleanTodoInserts checklist item into user task list.
createUsername: String!, username: String, email: String, phone: StringUserCreates user profile record with auto-generated avatar URL.

Frontend Mutation Recipes

Production patterns featuring optimistic updates, normalized cache synchronization, and server actions:

useGraphQLMutation.tsx
1
// Apollo Client Optimistic Mutation Pattern (React 19)
2
import { useMutation, gql } from '@apollo/client';
3
4
const CREATE_POST_MUTATION = gql
5
mutation CreatePost($title: String!, $body: String!, $userId: ID!) {
6
createPost(title: $title, body: $body, userId: $userId) {
7
id
8
title
9
body
10
userId
11
}
12
}
13
;
14
15
export function NewPostForm() {
16
const [createPost, { loading, error }] = useMutation(CREATE_POST_MUTATION, {
17
// 1. Optimistic UI update before network round-trip finishes
18
optimisticResponse: {
19
createPost: {
20
__typename: 'Post',
21
id: temp-${Date.now()},
22
title: 'Pending Submission...',
23
body: 'Optimistic body preview',
24
userId: '1',
25
},
26
},
27
// 2. Automatically sync Apollo normalized cache
28
update(cache, { data: { createPost } }) {
29
cache.modify({
30
fields: {
31
posts(existingPosts = []) {
32
const newPostRef = cache.writeFragment({
33
data: createPost,
34
fragment: gql
35
fragment NewPost on Post {
36
id
37
title
38
body
39
userId
40
}
41
,
42
});
43
return [newPostRef, ...existingPosts];
44
},
45
},
46
});
47
},
48
});
49
50
const handleSubmit = async (e: React.FormEvent) => {
51
e.preventDefault();
52
await createPost({
53
variables: {
54
title: 'Optimistic Post Title',
55
body: 'Rendered instantly in the client interface.',
56
userId: '1',
57
},
58
});
59
};
60
61
return <button onClick={handleSubmit} disabled={loading}>Submit Post</button>;
62
}