Using Apollo in Svelte 5

#svelte #apollo #graphql #javascript

I worked as an engineeer manager in a large e-commerce company in Saudi Arabia. Our frontend architecture was built on Svelte microfrontends, with separate apps handling user management, checkout, marketing, and search exploration.

Our backend was fully powered by GraphQL, and in the beginning, we adopted Houdini as our GraphQL client. Houdini is a great library, but in practice we found that the generated code often felt unclear and rigid, especially for component-driven queries instead of page-driven queries.

This became most noticeable when building smart components—UI elements that need to handle their own API calls, such as:

A header showing user login state
A shopping cart widget with live updates
Shared navigation or marketing components that are reused across apps but still need to be intelligent and data-driven

In these cases, we needed something flexible and reactive, with a clear mental model and strong tooling support.

Why Apollo?

Given the scale of our system, we leaned towards Apollo Client, because it provides:

Robust cache normalization out of the box
Excellent developer tools for debugging and inspecting queries
Rich ecosystem support (links, error handling, pagination strategies, etc.)

Since other parts of our company were already using Apollo in React and Angular projects, aligning on Apollo also reduced the cognitive overhead for new team members.

The Challenge in Svelte 5

At the time of migrating from Svelte 4 → Svelte 5, the only official option for Apollo in Svelte was svelte-apollo. Unfortunately, it had not been updated in several years and was missing modern Svelte 5 features like runes and fine-grained reactivity.

What I wanted was:

The full power of Apollo Client
First-class Svelte 5 integration (no extra boilerplate, reactive by default)
An experience as smooth as React