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>
<!-- 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 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>
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>
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>
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! π
})
- 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)