{
  "slug": "weweb-multiple-apis-page-load",
  "title": "WeWeb Call Multiple APIs on Page Load",
  "metaDescription": "Load Supabase and Stripe data in WeWeb with one request. RealComposer fetches both upstreams in parallel at the edge and merges them into one collection.",
  "headline": "One WeWeb collection instead of a waterfall of fetches",
  "category": "aggregation",
  "categoryLabel": "Multi-API Aggregation",
  "urgency": 8,
  "clientPlatform": "WeWeb",
  "upstreamServices": [
    "Supabase",
    "Stripe"
  ],
  "searchIntentQuery": "weweb call multiple apis on page load",
  "directAnswerSummary": "WeWeb pages that fetch several collections on load wait for each request and expose any keys used. A RealComposer pipeline calls Supabase and Stripe in parallel at the edge, injects both credentials from the vault, and returns one merged JSON object you bind as a single WeWeb collection.",
  "problem": {
    "title": "Why multiple WeWeb collections slow page load",
    "explanation": "Dashboards built in WeWeb often combine a Supabase profile with Stripe billing state. Two or three collections fetched on page load add round trips on mobile networks, and the Stripe call cannot run safely from the browser at all.",
    "risks": [
      "Sequential collection fetches delaying first render",
      "Stripe secret key needed for billing data in the front end",
      "Duplicate formatting logic across WeWeb formulas"
    ]
  },
  "solutionSteps": [
    {
      "stepNumber": 1,
      "title": "Store credentials in Secret Vault",
      "description": "Save SUPABASE_SERVICE_ROLE_KEY and STRIPE_SECRET_KEY in RealComposer so the value never enters the WeWeb project."
    },
    {
      "stepNumber": 2,
      "title": "Configure the edge pipeline",
      "description": "Add the upstream steps with vault header injection, set allowed origins, and map only the fields the screen binds."
    },
    {
      "stepNumber": 3,
      "title": "Bind one WeWeb collection to the pipeline",
      "description": "Call your workspace edge URL with a restricted rc_live_ client token.",
      "codeSnippet": "// WeWeb REST API collection\nURL:     https://realcomposer.com/v1/workspace/weweb-multiple-apis-page-load?userId={{user.id}}&customerId={{user.stripeCustomerId}}\nHeaders: Authorization: Bearer rc_live_client_token\nFetch:   On page load"
    }
  ],
  "pipelineConfig": {
    "name": "WeWeb Call Multiple APIs on Page Load",
    "method": "GET",
    "cacheTtlSeconds": 0,
    "authMode": "client_token",
    "steps": [
      {
        "stepKey": "supabase",
        "upstreamUrlTemplate": "https://{{secrets.SUPABASE_PROJECT_REF}}.supabase.co/rest/v1/profiles?id=eq.{{query.userId}}&select=full_name",
        "httpMethod": "GET",
        "headersTemplate": {
          "apikey": "{{secrets.SUPABASE_SERVICE_ROLE_KEY}}",
          "Authorization": "Bearer {{secrets.SUPABASE_SERVICE_ROLE_KEY}}"
        },
        "timeoutMs": 3000
      },
      {
        "stepKey": "stripe",
        "upstreamUrlTemplate": "https://api.stripe.com/v1/subscriptions?customer={{query.customerId}}&limit=1",
        "httpMethod": "GET",
        "headersTemplate": {
          "Authorization": "Bearer {{secrets.STRIPE_SECRET_KEY}}"
        },
        "timeoutMs": 3000
      }
    ],
    "outputMapping": {
      "version": 1,
      "fields": [
        {
          "targetPath": "name",
          "sourceStep": "supabase",
          "sourcePath": "0.full_name"
        },
        {
          "targetPath": "subscriptionStatus",
          "sourceStep": "stripe",
          "sourcePath": "data.0.status"
        }
      ]
    }
  },
  "sampleBloatedInput": {
    "supabase": [
      {
        "full_name": "Ada Lovelace"
      }
    ],
    "stripe": {
      "object": "list",
      "has_more": false,
      "data": [
        {
          "id": "sub_1Px",
          "status": "active",
          "livemode": true
        }
      ]
    }
  },
  "sampleSlimmedOutput": {
    "name": "Ada Lovelace",
    "subscriptionStatus": "active"
  },
  "curlSnippet": "curl -X GET \"https://realcomposer.com/v1/workspace/weweb-multiple-apis-page-load\" \\\n  -H \"Authorization: Bearer rc_live_client_token\"",
  "faqs": [
    {
      "question": "Is the Supabase service role key safe here?",
      "answer": "Yes, because it stays in the RealComposer vault. The query is filtered to the requested user id, and only two fields return to WeWeb."
    },
    {
      "question": "What if Stripe is slow?",
      "answer": "Each step has its own timeout, and the pipeline still returns the Supabase fields if the Stripe step fails, so the page renders."
    }
  ],
  "relatedRecipeSlugs": [
    "merge-supabase-and-stripe-into-single-endpoint",
    "flutterflow-multiple-apis-page-load",
    "call-openai-from-weweb-securely"
  ],
  "links": {
    "page": "https://realcomposer.com/recipes/weweb-multiple-apis-page-load",
    "markdown": "https://realcomposer.com/recipes/weweb-multiple-apis-page-load.md",
    "json": "https://realcomposer.com/recipes/weweb-multiple-apis-page-load.json",
    "install": "https://realcomposer.com/dashboard/pipelines/new?recipe=weweb-multiple-apis-page-load&via=agent"
  }
}