Stencil-Apollo - Stencil meets GraphQL

Stencil-Apollo Lets You Easily Use GraphQL in Web Components
GraphQL is everywhere! Together with Typescript it is one of those technologies everyone wants to get their hands on in 2019.
When using GraphQL on the client, the most popular library is the powerful Apollo Client. Today, Apollo (opens in a new tab) currently has an official support for leading Web Frameworks like React and Angular.
But what if you don't have to use those frameworks to create a really powerful and performant apps? Or what if you want to expose Web Components with shared logic like GraphQL data fetching to developers who use different frameworks?
Web Components and GraphQL
That's where Stencil (opens in a new tab) come in. It's a Web Components compiler that combines some of the best features from Angular, React and Vue to create web applications or re-usable platform-agnostic UI libraries based on Web Components.
But what if you want to use GraphQL in your Stencil projects or expose that power to your Web Components users?
The Solution!
Today, I am happy to announce the release of a new open source library
Now it is much easier to use StencilJS and create GraphQL-based applications. Stencil-Apollo has the same functionalities as its React sibling React-Apollo, and the usage is really simple.
<apollo-query
query={gql`
query allPosts {
posts {
title
votes
}
}
`}
renderer={({ data, loading }) => {
if (loading) return 'Loading...'
return (
<ul>
{data.posts.map(post => (
<li>
{post.title}({post.votes} votes)
</li>
))}
</ul>
)
}}
/>
Stencil and Apollo
Because Stencil-Apollo (opens in a new tab) uses Apollo-Client, you're still able to take advantage of an entire ecosystem of Apollo Links and Cache implementations.
Everything in Stencil-Apollo is based on Web Components
There are exactly 4 of them:
apollo-provider
defines an Apollo-Client so other Stencil-Apollo (opens in a new tab) components can use it (same as React-Apollo'sApolloProvider
).
As you know in GraphQL there are three kinds of operations and Stencil-Apollo (opens in a new tab) got all them covered:
apollo-query
lets you fetch dataapollo-mutation
is responsible to call mutationsapollo-subscription
handles subscription for you
As you can see, their names are pretty easy to remember!
Stencil-Apollo (opens in a new tab) combines the change detection mechanism of Apollo Client and StencilJS's Virtual DOM, like React-Apollo does for React's VDOM.
To start using Stencil-Apollo check out our examples and docs:
https://github.com/ardatan/stencil-apollo/ (opens in a new tab)
Stencil-Apollo (opens in a new tab) works quite well with Ionic 4, and we're planning to give support for all other frameworks, the same way as Ionic 4 does by using the power of Web Components.
Ready-To-Use and Strongly Typed GraphQL Components
The GraphQL Code Generator (opens in a new tab) can be used to generate TypeScript typings for both server and client.
This tool also generates strongly typed React-Apollo components and Apollo-Angular services to improve the development experience. It turns your GraphQL operations into ready to use elements.
Now it also supports Stencil-Apollo!
Check out our example (opens in a new tab) with GraphQL-Code-Generator
WhatsApp PWA Clone Using Stencil and Ionic 4
We're also working on an example Stencil PWA project that uses Stencil-Apollo (opens in a new tab) which will be another variation of our WhatsApp Clone.
Follow the process here:
https://github.com/Urigo/WhatsApp-Clone-Client-React/issues/158 (opens in a new tab)
- Stencil-Apollo repository (opens in a new tab)
- Documentation (opens in a new tab)
- An example of code generation (opens in a new tab)
Join our newsletter
Want to hear from us when there's something new? Sign up and stay up to date!
By subscribing, you agree with Beehiiv’s Terms of Service and Privacy Policy.
Recent issues of our newsletterSimilar articles

State of GraphQL Gateways in 2023
A six-month journey of researching, benchmarking, exploring and comparing GraphQL gateways and the Federation spec in 2023.

Hive Summer Update 2023
Learn what is new on GraphQL Hive, we have shipped a lot of new exciting features and improvements.

The complete GraphQL Scalar Guide
Knowing how native and custom GraphQL Scalar works enables building flexible and extendable GraphQL schema.

Build a GraphQL server running on Cloudflare Workers.
This course aims to build a practical GraphQL server on Cloudflare Workers using GraphQL Yoga, Pothos, Kysely, etc.