Polymer Apollo GraphQL Client web components 🚀

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

• Better <graphql-mutation> 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)