Fullstack Cookbooks

Integration Recipes & Cookbooks

Production-tested patterns and boilerplate code to connect Playground API to TanStack Query, Next.js 15 Server Actions, Axios, Vue 3, Svelte 5, and Playwright E2E suites.

Select Your Stack

recipe-tanstack

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

interface Post {

id: number;

title: string;

body: string;

user_id: number;

}

// 1. Fetch posts with credentials for isolated visitor session

export function usePosts(page = 1, limit = 10) {

return useQuery({

queryKey: ['posts', { page, limit }],

queryFn: async (): Promise<Post[]> => {

const res = await fetch(${'https://playground.nileslabs.com/api/v1'}/posts?_page=${page}&_limit=${limit}, {

credentials: 'include', // Persists HMAC session cookie

});

if (!res.ok) throw new Error('Failed to load posts');

const json = await res.json();

return json.data || json;

});

}

// 2. Stateful create mutation with optimistic updates

export function useCreatePost() {

const queryClient = useQueryClient();

return useMutation({

mutationFn: async (newPost: Omit<Post, 'id'>): Promise<Post> => {

const res = await fetch('https://playground.nileslabs.com/api/v1/posts', {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

credentials: 'include',

body: JSON.stringify(newPost),

});

if (!res.ok) throw new Error('Mutation failed');

return res.json();

// Invalidate and refetch posts query immediately

onSuccess: () => {

queryClient.invalidateQueries({ queryKey: ['posts'] });

});

}

// 3. Stateful delete mutation

export function useDeletePost() {

const queryClient = useQueryClient();

return useMutation({

mutationFn: async (id: number) => {

const res = await fetch(${'https://playground.nileslabs.com/api/v1'}/posts/${id}, {

method: 'DELETE',

credentials: 'include',

});

if (!res.ok) throw new Error('Delete failed');

return res.json();

onSuccess: () => {

queryClient.invalidateQueries({ queryKey: ['posts'] });

});

}

Integration Best Practices

Always Send Credentials

When querying from a browser, always specify credentials: 'include' (or Axios withCredentials: true) to ensure the HMAC session cookie is preserved.

Deterministic CI Headers

In automated test runners (Cypress, Playwright), use X-Playground-Identity: [test-id]. This guarantees parallel test workers never interfere with each other.

Cleanup After Test Suites

In test afterEach or beforeEach hooks, issue a DELETE /session/reset to ensure each test executes against clean baseline data.

Want to see these recipes in an end-to-end production application?

Check out the featured React 18 E-Commerce store demo with cart, JWT auth, and dynamic products.

View Showcase Demo

PreviousHow It Works

NextPlatform Comparisons