Stencil-Apollo is a collection of web components built using Stencil.

Release Blog Post: Stencil-Apollo - Stencil meets GraphQL

You can start using it in your existing project like its sibling React-Apollo;

Install it using npm or yarn;

  $ yarn add stencil-apollo

or

  $ npm i stencil-apollo

and don't forget to install other necessary dependencies if you don't have them.

  $ yarn add graphql @types/graphql graphql-tag apollo-boost

Add esnext.asynciterable to compilerOptions.lib field in tsconfig.json to make TypeScript allow GraphQL to use AsyncIterator.

 {
 ...
  "compilerOptions": {
    "lib": ["dom", "es2017", "esnext.asynciterable"],
  },
  ...
}

Then add stencil-apollo to your global file which is src/global/app.ts by default or your root component file;

import 'stencil-apollo';

Finally you can provide your ApolloClient instance on your root component, then use components everywhere in your project;

<apollo-provider client={new ApolloClient(...)}>
...
</apollo-provider>

  <apollo-query query={ gql`query { foo }` } renderer={
    ({ data, loading }) => {
       if (loading) {
        return 'Loading';
       }
       return <p>Foo: {data.foo}</p>;
    }
  } />

or you can use functional components like React-Apollo

import { Query } from 'stencil-apollo';

<Query query={ gql`query { foo }` }>
  {
    ({ data, loading }) => {
      if (loading) {
      return 'Loading';
      }
      return <p>Foo: {data.foo}</p>;
    }
  }
</Query>