https://github.com/ardatan/stencil-apollo
Stencil Apollo Library
https://github.com/ardatan/stencil-apollo
Last synced: 8 months 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 7 years ago)
- Default Branch: master
- Last Pushed: 2024-10-28T14:01:33.000Z (about 1 year ago)
- Last Synced: 2024-10-30T00:32:52.194Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://medium.com/the-guild/stencil-apollo-stencil-meets-graphql-6fec577ee615
- Size: 353 KB
- Stars: 98
- Watchers: 8
- Forks: 17
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
- awesome-stenciljs - Stencil Apollo
README
[](https://badge.fury.io/js/stencil-apollo)
[](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}
;
}
}
```