GraphQL and Qwik: Supercharge cross-platform for Scalability

// 1. Qwik + GraphQL Code Example: Product List with Resumable Data Fetching
// Imports: Qwik core, GraphQL request client, and type generation utilities
import { component$, useSignal, useEndpoint, useVisibleTask$ } from '@builder.io/qwik';
import { GraphQLClient, gql } from 'graphql-request';
import type { Product } from './types'; // Generated via GraphQL Code Generator

// Initialize GraphQL client with error handling for network failures
const graphqlClient = new GraphQLClient(import.meta.env.VITE_GRAPHQL_ENDPOINT, {
  errorPolicy: 'all', // Capture both data and errors
  fetch: (url, options) => {
    return fetch(url, {
      ...options,
      // Add timeout to prevent hanging requests on slow networks
      signal: AbortSignal.timeout(5000),
    }).catch((err) => {
      console.error('[GraphQL Client] Network request failed:', err);
      throw new Error(`GraphQL network error: ${err.message}`);
    });
  },
});

// Typed GraphQL query for product list, fetches only required fields
const GET_PRODUCTS_QUERY = gql`
  query GetProducts($category: String!, $limit: Int = 20) {
    products(category: $category, limit: $limit) {
      id
      name
      price
      thumbnailUrl
      inventoryCount
    }
  }
`;

// Qwik component with resumable rendering: no hydration overhead on client
export const ProductList = component$((props: { category: string }) => {
  // Reactive signal for product data, initialized to null
  const products = useSignal(null);
  // Error signal for GraphQL failures
  const error = useSignal(null);
  // Loading state signal
  const isLoading = useSignal(false);

  // useEndpoint for server-side data fetching (Qwik's SSR/SSG equivalent)
  // Runs on server during prerender, or client during navigation
  useEndpoint(async () => {
    isLoading.value = true;
    error.value = null;
    try {
      const data = await graphqlClient.request<{ products: Product[] }>(
        GET_PRODUCTS_QUERY,
        { category: props.category }
      );
      products.value = data.products;
      // Return data for Qwik's serialization to client
      return { products: data.products };
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Unknown GraphQL error';
      error.value = errorMessage;
      console.error('[ProductList] Failed to fetch products:', errorMessage);
      return { error: errorMessage };
    } finally {
      isLoading.value = false;
    }
  });

  // Visible task: only runs when component enters viewport, saves resources
  useVisibleTask$(() => {
    // Log performance metrics for GraphQL fetch
    if (products.value) {
      const metric = performance.getEntriesByName('graphql-products-fetch');
      console.log(`[Perf] Product fetch took ${metric[0]?.duration?.toFixed(2)}ms`);
    }
  });

  // Render states: loading, error, empty, success
  if (isLoading.value) {
    return Loading products...;
  }

  if (error.value) {
    return (

        Failed to load products: {error.value}
         window.location.reload()}
          class="mt-2 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
        >
          Retry


    );
  }

  if (!products.value?.length) {
    return No products found in {props.category};
  }

  return (

      {products.value.map((product) => (


          {product.name}
          ${product.price.toFixed(2)}
           0 ? 'text-green-600' : 'text-red-600'}`}>
            {product.inventoryCount > 0 ? `In stock: ${product.inventoryCount}` : 'Out of stock'}


      ))}

  );
});

// 2. Qwik Server-Side GraphQL Endpoint with Batch Request Support
// Imports for Qwik server, GraphQL execution, and schema validation
import { type RequestHandler } from '@builder.io/qwik-city';
import { graphql } from 'graphql';
import { makeExecutableSchema } from '@graphql-tools/schema';
import { readFileSync } from 'node:fs';
import { parse } from 'graphql-request';

// Load and compile GraphQL schema from .graphql file (type-safe)
const typeDefs = readFileSync(new URL('./schema.graphql', import.meta.url), 'utf-8');
const resolvers = {
  Query: {
    products: async (_parent: unknown, { category, limit }: { category: string; limit: number }) => {
      // Simulate database fetch with error handling
      try {
        const dbResponse = await fetch(`${import.meta.env.VITE_DB_ENDPOINT}/products`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ category, limit }),
          signal: AbortSignal.timeout(3000),
        });
        if (!dbResponse.ok) throw new Error(`DB returned ${dbResponse.status}`);
        return dbResponse.json();
      } catch (err) {
        console.error('[Resolver] Failed to fetch products from DB:', err);
        throw new Error('Product fetch failed');
      }
    },
    user: async (_parent: unknown, _args: unknown, context: { userId: string }) => {
      if (!context.userId) throw new Error('Unauthorized');
      // Fetch user from auth service
      return { id: context.userId, email: 'user@example.com' };
    },
  },
  Mutation: {
    addToCart: async (_parent: unknown, { productId, quantity }: { productId: string; quantity: number }, context: { userId: string }) => {
      if (!context.userId) throw new Error('Unauthorized');
      // Validate input
      if (quantity < 1) throw new Error('Quantity must be at least 1');
      // Simulate cart update
      return { success: true, cartItemId: '123', productId, quantity };
    },
  },
};

// Create executable schema with error handling for invalid type defs
let schema: ReturnType;
try {
  schema = makeExecutableSchema({ typeDefs, resolvers });
} catch (err) {
  console.error('[GraphQL Schema] Failed to compile schema:', err);
  throw new Error('Invalid GraphQL schema configuration');
}

// Qwik API request handler for /api/graphql endpoint
export const onPost: RequestHandler = async (requestEvent) => {
  const { request, response, url } = requestEvent;
  // Set CORS headers for cross-platform clients
  response.headers.set('Access-Control-Allow-Origin', import.meta.env.VITE_ALLOWED_ORIGIN);
  response.headers.set('Access-Control-Allow-Methods', 'POST, OPTIONS');
  response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');

  // Handle preflight requests
  if (request.method === 'OPTIONS') {
    response.status = 204;
    return;
  }

  // Only accept POST requests
  if (request.method !== 'POST') {
    response.status = 405;
    response.headers.set('Allow', 'POST');
    response.body = JSON.stringify({ error: 'Method not allowed' });
    return;
  }

  // Parse request body with size limit to prevent DoS
  let body: { query: string; variables?: Record; operationName?: string } | { batch: Array<{ query: string; variables?: Record }> };
  try {
    const text = await request.text();
    if (text.length > 1e6) throw new Error('Request body too large (max 1MB)');
    body = JSON.parse(text);
  } catch (err) {
    response.status = 400;
    response.body = JSON.stringify({ error: 'Invalid request body' });
    return;
  }

  // Extract auth token from headers for context
  const authHeader = request.headers.get('Authorization');
  const userId = authHeader?.startsWith('Bearer ') ? authHeader.slice(7) : undefined;
  const context = { userId };

  // Handle batch requests (GraphQL best practice for reducing round trips)
  if ('batch' in body) {
    const results = await Promise.all(
      body.batch.map(async (req) => {
        try {
          const { data, errors } = await graphql({
            schema,
            source: req.query,
            variableValues: req.variables,
            contextValue: context,
          });
          return { data, errors: errors?.map((e) => e.message) };
        } catch (err) {
          return { errors: [err instanceof Error ? err.message : 'Unknown error'] };
        }
      })
    );
    response.status = 200;
    response.headers.set('Content-Type', 'application/json');
    response.body = JSON.stringify(results);
    return;
  }

  // Handle single request
  const { query, variables, operationName } = body;
  try {
    const { data, errors } = await graphql({
      schema,
      source: query,
      variableValues: variables,
      operationName,
      contextValue: context,
    });
    response.status = 200;
    response.headers.set('Content-Type', 'application/json');
    response.body = JSON.stringify({ data, errors: errors?.map((e) => e.message) });
  } catch (err) {
    response.status = 500;
    response.body = JSON.stringify({ error: err instanceof Error ? err.message : 'Internal server error' });
  }
};

// 3. Performance Benchmark Script: REST + React vs GraphQL + Qwik
// Uses Puppeteer to measure real browser metrics across 5 network conditions
import puppeteer, { type Browser, type Page } from 'puppeteer';
import { mkdirSync, writeFileSync } from 'node:fs';
import { join } from 'node:path';

// Benchmark configuration: test 5 network profiles and 3 page types
const BENCHMARK_CONFIG = {
  iterations: 10, // Run each test 10 times for statistical significance
  networkProfiles: [
    { name: 'Fast 4G', download: 10_000, upload: 5_000, latency: 20 },
    { name: 'Slow 4G', download: 1_500, upload: 750, latency: 150 },
    { name: '3G', download: 750, upload: 250, latency: 300 },
    { name: '2G', download: 50, upload: 30, latency: 1000 },
    { name: 'Low-End Mobile', download: 200, upload: 100, latency: 500, cpuThrottling: 4 },
  ],
  testPages: [
    { name: 'Product List', path: '/products' },
    { name: 'User Dashboard', path: '/dashboard' },
    { name: 'Checkout Flow', path: '/checkout' },
  ],
  targets: [
    { name: 'REST + React', url: 'https://rest-react-app.example.com' },
    { name: 'GraphQL + Qwik', url: 'https://graphql-qwik-app.example.com' },
  ],
} as const;

// Metrics to collect for each run
type BenchmarkMetric = {
  page: string;
  network: string;
  target: string;
  fcp: number; // First Contentful Paint (ms)
  tti: number; // Time to Interactive (ms)
  bundleSize: number; // Total JS bundle size (KB)
  graphqlRequests: number; // Number of GraphQL requests (0 for REST)
  restRequests: number; // Number of REST requests (0 for GraphQL)
  errorRate: number; // Percentage of failed requests
};

// Main benchmark runner
async function runBenchmark(): Promise {
  const browser: Browser = await puppeteer.launch({
    headless: true,
    args: ['--no-sandbox', '--disable-setuid-sandbox'],
  });
  const results: BenchmarkMetric[] = [];

  try {
    for (const target of BENCHMARK_CONFIG.targets) {
      for (const network of BENCHMARK_CONFIG.networkProfiles) {
        for (const page of BENCHMARK_CONFIG.testPages) {
          // Run multiple iterations for statistical significance
          for (let i = 0; i < BENCHMARK_CONFIG.iterations; i++) {
            const pageInstance: Page = await browser.newPage();
            // Set network throttling
            const client = await pageInstance.target().createCDPSession();
            await client.send('Network.emulateNetworkConditions', {
              offline: false,
              downloadThroughput: network.download * 1024 / 8, // Convert to bytes/sec
              uploadThroughput: network.upload * 1024 / 8,
              latency: network.latency,
            });
            // Set CPU throttling if specified
            if (network.cpuThrottling) {
              await client.send('Emulation.setCPUThrottlingRate', { rate: network.cpuThrottling });
            }

            // Collect performance metrics
            const metrics: Partial = {
              page: page.name,
              network: network.name,
              target: target.name,
            };

            // Track network requests
            let graphqlRequestCount = 0;
            let restRequestCount = 0;
            let errorCount = 0;
            pageInstance.on('request', (req) => {
              const url = req.url();
              if (url.includes('/graphql')) graphqlRequestCount++;
              else if (url.includes('/api/')) restRequestCount++;
            });
            pageInstance.on('requestfailed', () => errorCount++);
            pageInstance.on('response', (res) => {
              if (!res.ok()) errorCount++;
            });

            // Navigate to page and wait for load
            const startTime = Date.now();
            await pageInstance.goto(`${target.url}${page.path}`, { waitUntil: 'networkidle0' });
            const loadTime = Date.now() - startTime;

            // Get performance entries for FCP and TTI
            const performanceEntries = await pageInstance.evaluate(() => {
              return JSON.stringify(performance.getEntriesByType('paint')
                .concat(performance.getEntriesByType('navigation'))
                .concat(performance.getEntriesByType('resource')));
            });
            const entries = JSON.parse(performanceEntries) as PerformanceEntry[];

            // Extract FCP
            const fcpEntry = entries.find((e) => e.name === 'first-contentful-paint');
            metrics.fcp = fcpEntry ? fcpEntry.startTime : loadTime;

            // Extract TTI (simplified: time until no long tasks > 50ms)
            const longTasks = entries.filter((e) => e.entryType === 'longtask' && e.duration > 50);
            metrics.tti = longTasks.length > 0 ? Math.max(...longTasks.map((t) => t.startTime + t.duration)) : metrics.fcp!;

            // Calculate bundle size: sum of all JS resource sizes
            const jsResources = entries.filter((e) => e.entryType === 'resource' && (e as PerformanceResourceTiming).initiatorType === 'script');
            metrics.bundleSize = jsResources.reduce((sum, res) => {
              const timing = res as PerformanceResourceTiming;
              return sum + (timing.transferSize || 0);
            }, 0) / 1024; // Convert to KB

            // Set request counts
            metrics.graphqlRequests = graphqlRequestCount;
            metrics.restRequests = restRequestCount;
            metrics.errorRate = (errorCount / (graphqlRequestCount + restRequestCount)) * 100 || 0;

            results.push(metrics as BenchmarkMetric);
            await pageInstance.close();
            console.log(`Completed ${target.name} | ${network.name} | ${page.name} | Iteration ${i + 1}`);
          }
        }
      }
    }
  } finally {
    await browser.close();
  }

  return results;
}

// Run benchmark and save results
async function main() {
  console.log('Starting benchmark run...');
  const startTime = Date.now();
  const results = await runBenchmark();
  const duration = (Date.now() - startTime) / 1000;
  console.log(`Benchmark completed in ${duration.toFixed(2)} seconds`);

  // Save raw results to JSON
  const outputDir = join(process.cwd(), 'benchmark-results');
  mkdirSync(outputDir, { recursive: true });
  writeFileSync(
    join(outputDir, `results-${Date.now()}.json`),
    JSON.stringify(results, null, 2)
  );

  // Print summary statistics
  const summary = results.reduce((acc, curr) => {
    const key = `${curr.target} | ${curr.network} | ${curr.page}`;
    if (!acc[key]) acc[key] = { fcp: [], tti: [], bundleSize: [] };
    acc[key].fcp.push(curr.fcp);
    acc[key].tti.push(curr.tti);
    acc[key].bundleSize.push(curr.bundleSize);
    return acc;
  }, {} as Record);

  console.log('\n=== Benchmark Summary ===');
  for (const [key, values] of Object.entries(summary)) {
    const avgFcp = values.fcp.reduce((a, b) => a + b, 0) / values.fcp.length;
    const avgTti = values.tti.reduce((a, b) => a + b, 0) / values.tti.length;
    const avgBundle = values.bundleSize.reduce((a, b) => a + b, 0) / values.bundleSize.length;
    console.log(`\n${key}`);
    console.log(`  Avg FCP: ${avgFcp.toFixed(2)}ms`);
    console.log(`  Avg TTI: ${avgTti.toFixed(2)}ms`);
    console.log(`  Avg Bundle Size: ${avgBundle.toFixed(2)}KB`);
  }
}

// Execute if run directly
if (require.main === module) {
  main().catch((err) => {
    console.error('Benchmark failed:', err);
    process.exit(1);
  });
}

# codegen.yml: GraphQL Code Generator config for Qwik
schema:
  - https://graphql-qwik-app.example.com/api/graphql
documents:
  - './src/**/*.graphql'
generates:
  ./src/generated/graphql.ts:
    plugins:
      - typescript
      - typescript-operations
      - qwik
    config:
      useTypeImports: true
      dedupeFragments: true
      # Generate Qwik-specific hooks with useEndpoint integration
      qwikPreset: 'resumable'
      # Add error handling to all generated hooks
      withHooks: true
      # Support batch GraphQL requests
      batchRequests: true
      # Generate types for GraphQL errors
      addErrorType: true

// Qwik component with prefetching for GraphQL data
import { component$, usePrefetch } from '@builder.io/qwik';
import { GetProductDocument } from '../generated/graphql';

export const ProductCard = component$((props: { productId: string }) => {
  // Prefetch product data when component enters viewport or user hovers
  usePrefetch(GetProductDocument, { variables: { id: props.productId } });

  return (
     usePrefetch(GetProductDocument, { variables: { id: props.productId } })}
    >
      {props.productId}
      View product details

  );
});

// Qwik task to send GraphQL performance metrics to Datadog
import { useTask$ } from '@builder.io/qwik';
import { GetProductsDocument } from '../generated/graphql';

export const useGraphQLMetrics = () => {
  return useTask$(({ track, props }) => {
    track(() => props.operationName);
    track(() => props.duration);

    // Send metric to Datadog only in production
    if (import.meta.env.PROD) {
      const metric = {
        metric: 'graphql.qwik.operation.duration',
        points: [[Math.floor(Date.now() / 1000), props.duration]],
        tags: [
          `operation:${props.operationName}`,
          `component:${props.componentName}`,
          `qwik_env:${import.meta.env.MODE}`,
        ],
      };

      // Send via fetch, no await to avoid blocking Qwik rendering
      fetch('https://api.datadoghq.com/api/v1/series', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'DD-API-KEY': import.meta.env.VITE_DATADOG_API_KEY,
        },
        body: JSON.stringify({ series: [metric] }),
      }).catch((err) => console.error('Failed to send metric:', err));
    }
  });
};