Integrate Contentful with Xata

1import { useActionState } from 'react';
2import { z } from 'zod';
3
4/** 
5 * 2026-Ready Stable SDK Versions:
6 * next: ^15.x.x (using React 19 stable features)
7 * zod: ^4.0.0-beta
8 * typescript: ^6.x.x
9 */
10
11// 1. Define strict schema to handle 'undefined' possibilities
12const ConnectionSchema = z.object({
13  sourceId: z.string().min(1, 'Source ID is required'),
14  targetId: z.string().optional().default('default_target'),
15});
16
17type ConnectionState = { success: boolean; message: string; data?: any } | null;
18
19// 2. Server Action for secure entity connection
20export async function connectEntitiesAction(prevState: ConnectionState, formData: FormData): Promise<ConnectionState> {
21  "use server";
22  
23  const rawData = { 
24    sourceId: formData.get('sourceId'),
25    targetId: formData.get('targetId') 
26  };
27
28  const validated = ConnectionSchema.safeParse(rawData);
29
30  if (!validated.success) {
31    return { success: false, message: 'Validation failed: ' + validated.error.message };
32  }
33
34  try {
35    // Simulation of connection logic between two entities
36    console.log('Connecting:', validated.data.sourceId, 'to', validated.data.targetId);
37    return { success: true, message: 'Connection established successfully.', data: validated.data };
38  } catch (error) {
39    return { success: false, message: 'Internal Server Error' };
40  }
41}
42
43// 3. Client Component using React 19 hooks
44export function ConnectionForm() {
45  const [state, formAction, isPending] = useActionState(connectEntitiesAction, null);
46
47  return (
48    <form action={formAction} className="flex flex-col gap-4">
49      <input name="sourceId" placeholder="Source ID" required className="border p-2" />
50      <input name="targetId" placeholder="Target ID (Optional)" className="border p-2" />
51      <button type="submit" disabled={isPending} className="bg-blue-600 text-white p-2">
52        {isPending ? 'Connecting...' : 'Establish Connection'}
53      </button>
54      {state?.message && <p className={state.success ? 'text-green-500' : 'text-red-500'}>{state.message}</p>}
55    </form>
56  );
57}