https://github.com/ardatan/stencil-apollo

Stencil Apollo Library
https://github.com/ardatan/stencil-apollo

Last synced: 10 days ago
JSON representation

Stencil Apollo Library

• Host: GitHub
• URL: https://github.com/ardatan/stencil-apollo
• Owner: ardatan
• Created: 2018-09-06T03:29:53.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2024-05-28T22:37:17.000Z (5 months ago)
• Last Synced: 2024-05-29T13:27:48.605Z (5 months ago)
• Language: TypeScript
• Homepage: https://medium.com/the-guild/stencil-apollo-stencil-meets-graphql-6fec577ee615
• Size: 353 KB
• Stars: 98
• Watchers: 8
• Forks: 19
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

• awesome-stenciljs - Stencil-Apollo - A set of Web Components based on [Apollo Client](https://github.com/apollographql/apollo-client) (List of Awesome Components Made using StencilJS / Individual Components)

README

        
![stencil](https://user-images.githubusercontent.com/25294569/64912199-8750c700-d734-11e9-807b-041fc6fe80d4.gif)

[![npm version](https://badge.fury.io/js/stencil-apollo.svg)](https://badge.fury.io/js/stencil-apollo)

[![Discord Chat](https://img.shields.io/discord/625400653321076807)](https://discord.gg/xud7bH9)

Stencil-Apollo is a collection of web components built using [Stencil](https://github.com/ionic-team/stencil).

[**Release Blog Post:** Stencil-Apollo - Stencil meets GraphQL](https://medium.com/the-guild/stencil-apollo-stencil-meets-graphql-6fec577ee615)

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

Install it using npm or yarn;

```bash

  $ yarn add stencil-apollo

```

or

```bash

  $ npm i stencil-apollo

```

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

```bash

  $ 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`.

```ejson

 {

 ...

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

```ts

import 'stencil-apollo';

```

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

```tsx

...

```

```tsx

   {

       if (loading) {

        return 'Loading';

       }

       return 
Foo: {data.foo}
;

    }

  } />

```


or you can use functional components like React-Apollo

```tsx

import { Query } from 'stencil-apollo';

  {

    ({ data, loading }) => {

      if (loading) {

      return 'Loading';

      }

      return 
Foo: {data.foo}
;

    }

  }


```