Directory

polymer-apollo-client - Vaadin Add-on Directory

Polymer Apollo GraphQL Client web components polymer-apollo-client - Vaadin Add-on Directory
**[ 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 } }
  • Name: [[data.Starship.name]]
  • Class: [[data.Starship.class]]
``` ## Getting started: ```html ``` ```html ``` ```html ``` ```html query { Starship(name: "Millennium Falcon") { name class } }
  • Name: [[data.Starship.name]]
  • Class: [[data.Starship.class]]
``` ## Deferred queries Deferred queries use `Polymer.Async.idlePeriod.run(executeQuery)` to defer the query execution to a later time. ```html query { allStarships(first: 5, filter: {pilots_some: {name_not: ""}}) { name class pilots { name homeworld { name } } } } ``` ## Query variables When the `variables` property changes, the query gets automatically re-fetched. For a full blown example, take a look at the third demo. The gist is that you need to dynamically calculate the variables object based on other properties of the element. ```html 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)