Wayfair: Making a Checkout Rewards Modal Feel Immediate
I prefetched a checkout modal, caused an outage, then built a safer fix: a lightweight GraphQL preview query that separated CMS readiness from purchase-contract creation.
Before vs. after
What went wrong
The modal depended on one GraphQL query for CMS content, eligibility, payment terms, and a purchase contract. Customers saw a blank spinner while all four loaded.
My first fix was to prefetch that query on page load. It worked locally, but production traffic exposed the problem: visits to PDP, Hot Deals, and Browse created payment intents for millions of customers who never opened the modal.
The safer design
I split the work between two queries:
- The preview query returns only CMS content and eligibility. The client can run it early without creating checkout state.
- The full query runs after the customer opens the modal. That is when the application creates the purchase contract and loads its payment terms.
When the modal opens, the client renders the prefetched content immediately. It merges in the full checkout response when it arrives and shows loading placeholders only for widgets that depend on the contract.