polymer-apollo-client - Vaadin Add-on Directory
Polymer Apollo GraphQL Client web components
**[ This description is mirrored from README.md at [github.com/reach-digital/polymer-apollo-client](https://github.com//reach-digital/polymer-apollo-client/blob/2.4.4/README.md) on 2019-05-22 ]**
# Polymer Apollo GraphQL Client web components �
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg?style=flat-square)](https://www.webcomponents.org/element/reach-digital/polymer-apollo-client)
Easy integration with GraphQL.
```html
query {
Starship(name: "Millennium Falcon") {
name
class
}
}
query {
Starship(name: "Millennium Falcon") {
name
class
}
}
query {
allStarships(first: 5, filter: {pilots_some: {name_not: ""}}) {
name
class
pilots {
name
homeworld {
name
}
}
}
}
query Pagination($skip: Int!) {
allStarships(first: 5, skip: $skip) {
name
class
}
}
```
## Options
You can pass options to `HttpLink()`, `WebSocketLink()` and `ApolloClient()` using
`config`, `wsConfig` and `apolloConfig` properties. It may be useful for authorization,
connection to Apollo Client DevTools, etc.
```html
```
## Mutations (draft)
_Note: the current implementation for mutations is in draft, API might change in a future release._
The current implementation stays as close to the `` as possible.
```html
mutation SubmitContactForm(
$name: String!,
$email: String!,
$phone: String!,
$subject: String!,
$message: String!
) {
createContactForm(
name: $name,
email: $email,
phone: $phone,
subject: $subject,
message: $message
) {
id
}
}
```
```js
//Somewhere after your button has called submit()
this.contactFormData = {} //fill the contactMutation with the correct data.
//It will give an error if not everything is filled in correctly.
this.$.contactMutation.validate()
this.$.contactMutation.execute().then((result) => {
//AMAZING RESULT, mutation has been submitted! �
})
```
## Todo
- Better `` API and documentation.
- Add Fragments examples (http://dev.apollodata.com/react/fragments.html)
- Add Pagination examples (http://dev.apollodata.com/react/optimistic-ui.html)
- Add Optimistic UI examples (http://dev.apollodata.com/react/optimistic-ui.html)
- Name: [[data.Starship.name]]
- Class: [[data.Starship.class]]
- Name: [[data.Starship.name]]
- Class: [[data.Starship.class]]
[[starship.name]] ([[starship.class]])
- [[pilot.name]] ([[pilot.homeworld.name]])