Directory

← Back

polymer-apollo-client

Polymer Apollo GraphQL Client web components

Author

Rating

Popularity

<100

[ This description is mirrored from README.md at github.com/reach-digital/polymer-apollo-client on 2019-05-22 ]

Polymer Apollo GraphQL Client web components �

Published on webcomponents.org

Easy integration with GraphQL.

<!-- To explore and play with the API, go to https://api.graphcms.com/simple/v1/swapi -->
<!-- This field is editable, so you can try things out -->

<graphql-client config='{"uri": "https://api.graphcms.com/simple/v1/swapi"}'></graphql-client>

<graphql-query result="{{data}}">
  query {
    Starship(name: "Millennium Falcon") {
      name
      class
    }
  }
</graphql-query>

<ul>
  <li>Name: [[data.Starship.name]]</li>
  <li>Class: [[data.Starship.class]]</li>
</ul>

Getting started:

<!-- Import the `build/apollo-client.js` in your website for a default setup -->
<script src="bower_components/polymer-apollo-client/build/apollo-client.js"></script>
<!-- Import the `build/apollo-client-subscription.js` instead of `build/apollo-client.js`, if you need GraphQL subscriptions support -->
<script src="bower_components/polymer-apollo-client/build/apollo-client-subscription.js"></script>
<!-- Import the `build/apollo-client-subscription-file-upload.js` instead of `build/apollo-client.js`, if you need file upload via GraphQL support -->
<script src="bower_components/polymer-apollo-client/build/apollo-client-subscription-file-upload.js"></script>
<!-- Define a graphql-client somewhere once -->
<graphql-client config='{"uri": "https://api.graphcms.com/simple/v1/swapi"}'></graphql-client>

<graphql-query result="{{data}}">
  query {
    Starship(name: "Millennium Falcon") {
      name
      class
    }
  }
</graphql-query>

<ul>
  <li>Name: [[data.Starship.name]]</li>
  <li>Class: [[data.Starship.class]]</li>
</ul>

Deferred queries

Deferred queries use Polymer.Async.idlePeriod.run(executeQuery) to defer the query execution to a later time.

<!-- Client is already defined, so no need to do it twice -->
<graphql-query result="{{starShipsData}}" defer>
  query {
    allStarships(first: 5, filter: {pilots_some: {name_not: ""}}) {
      name
      class
      pilots {
        name
        homeworld {
          name
        }
      }
    }
  }
</graphql-query>

<template is="dom-repeat" items="[[starShipsData.allStarships]]" as="starship">
  <h2>[[starship.name]] ([[starship.class]])</h2>
  <ul>
    <template is="dom-repeat" items="[[starship.pilots]]" as="pilot">
      <li>[[pilot.name]] ([[pilot.homeworld.name]])</li>
    </template>
  </ul>
</template>

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.

<graphql-query result="{{pagination}}" variables="[[_calculateVariables(skip)]]">
  query Pagination($skip: Int!) {
    allStarships(first: 5, skip: $skip) {
      name
      class
    }
  }
</graphql-query>

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.

<graphql-client
    config='{
      "uri": "https://graphql.endpoint/graphql",
      "transportBatching": true,
      "headers": {
        "authorization": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiJjamtjaDFhc2kwMDN5MGExNXhteHIydWMzIiwiaWF0IjoxNTMzNzE5MzY2fQ.gielaRu4-YVrixfuj4AHbVbVo1fBbewkJwFb93krmMQ"
      }
    }'
    ws-config='{
      "uri": "wss://graphql.endpoint/graphql",
      "options": {
        "reconnect": true,
        "connectionParams": {
          "Authorization": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiJjamtjaDFhc2kwMDN5MGExNXhteHIydWMzIiwiaWF0IjoxNTMzNzE5MzY2fQ.gielaRu4-YVrixfuj4AHbVbVo1fBbewkJwFb93krmMQ"
        }
      }
    }'
    apollo-config='{"connectToDevTools": true}'>
</graphql-client>

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 <graphql-query> as possible.

<graphql-mutation id="contactMutation" variables="[[contactFormData]]" result="{{contactMutationResult}}">
  mutation SubmitContactForm(
    $name: String!,
    $email: String!,
    $phone: String!,
    $subject: String!,
    $message: String!
  ) {
    createContactForm(
      name: $name,
      email: $email,
      phone: $phone,
      subject: $subject,
      message: $message
    ) {
      id
    }
  }
</graphql-mutation>
//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

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • polymer#Polymer/polymer#^2.0.0
  • matryoshka-loader#reach-digital/polymer-matryoshka-loader#^0.8.0
Released
2019-01-07
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 2.0+
Polymer 1.0+ in 0.8.1
Browser
Browser Independent

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)
Online