Stencil-Apollo - Stencil meets GraphQL

This article was published on Wednesday, March 6, 2019 by Arda Tanrikulu @ The Guild Blog

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 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 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

stencil-apollo

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 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 components can use it (same as React-Apollo's ApolloProvider).

As you know in GraphQL there are three kinds of operations and
Stencil-Apollo got all them covered:

• apollo-query lets you fetch data
• apollo-mutation is responsible to call mutations
• apollo-subscription handles subscription for you

As you can see, their names are pretty easy to remember!

Stencil-Apollo 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/

Stencil-Apollo 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 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
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 which will be another variation of our
WhatsApp Clone.

Follow the process here:

https://github.com/Urigo/WhatsApp-Clone-Client-React/issues/158

---

• Stencil-Apollo repository
• Documentation
• An example of code generation