Framework Recipes
Production-ready code snippets and architecture patterns for popular frontend libraries and test runners.
React with TanStack Query
Manage sandbox state queries and mutations with automatic cache invalidation.
1
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
2
3
const API_BASE = 'https://playground-api-xi.vercel.app/api/v1';
4
5
// 1. Fetch Posts List with search
6
export function usePosts(query = '') {
7
return useQuery({
8
queryKey: ['posts', query],
9
queryFn: async () => {
10
const url = query ? ${API_BASE}/posts?q=${query} : ${API_BASE}/posts;
11
const res = await fetch(url, { credentials: 'include' });
12
return res.json();
13
},
14
});
15
}
16
17
// 2. Create Post Mutation (Persists in sandbox!)
18
export function useCreatePost() {
19
const queryClient = useQueryClient();
20
return useMutation({
21
mutationFn: async (newPost) => {
22
const res = await fetch(${API_BASE}/posts, {
23
method: 'POST',
24
headers: { 'Content-Type': 'application/json' },
25
credentials: 'include',
26
body: JSON.stringify(newPost),
27
});
28
return res.json();
29
},
30
onSuccess: () => {
31
queryClient.invalidateQueries({ queryKey: ['posts'] });
32
},
33
});
34
}
Axios Client with JWT Interceptors
Configured client passing session cookies and Bearer tokens seamlessly.
1
import axios from 'axios';
2
3
// Configured Axios instance with auto-cookies and Bearer tokens
4
export const api = axios.create({
5
baseURL: 'https://playground-api-xi.vercel.app/api/v1',
6
withCredentials: true,
7
});
8
9
api.interceptors.request.use((req) => {
10
const token = localStorage.getItem('access_token');
11
if (token) req.headers.Authorization = Bearer ${token};
12
return req;
13
});
Playwright Automated E2E Tests
Execute parallel tests in complete isolation using custom session identity headers.
1
import { test, expect } from '@playwright/test';
2
3
test('Isolated sandbox CRUD lifecycle in CI', async ({ request }) => {
4
const headers = { 'X-Playground-Identity': 'test-' + Date.now() };
5
6
// 1. Create a post
7
const res = await request.post('https://playground-api-xi.vercel.app/api/v1/posts', {
8
headers,
9
data: { title: 'CI Post', body: 'Testing persistence', user_id: 1 },
10
});
11
expect(res.status()).toBe(201);
12
13
// 2. Verify in list
14
const list = await (await request.get('https://playground-api-xi.vercel.app/api/v1/posts', { headers })).json();
15
expect(list.data[0].title).toBe('CI Post');
16
17
// 3. Reset sandbox
18
await request.delete('https://playground-api-xi.vercel.app/api/v1/session/reset', { headers });
19
});