Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/reach-digital/polymer-apollo-client
Polymer Apollo GraphQL Client web components
https://github.com/reach-digital/polymer-apollo-client
apollo apollo-client graphql graphql-client graphql-files graphql-query graphql-subscriptions polymer polymer-2 polymer-element polymer2 web-component web-components
Last synced: 3 months ago
JSON representation
Polymer Apollo GraphQL Client web components
- Host: GitHub
- URL: https://github.com/reach-digital/polymer-apollo-client
- Owner: reach-digital
- License: mit
- Created: 2017-08-11T13:20:10.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-02-01T17:59:06.000Z (almost 5 years ago)
- Last Synced: 2024-09-28T21:23:03.587Z (3 months ago)
- Topics: apollo, apollo-client, graphql, graphql-client, graphql-files, graphql-query, graphql-subscriptions, polymer, polymer-2, polymer-element, polymer2, web-component, web-components
- Language: HTML
- Homepage:
- Size: 575 KB
- Stars: 29
- Watchers: 4
- Forks: 5
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Polymer Apollo GraphQL Client web components 🚀
[](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
}
}
}
}
[[starship.name]] ([[starship.class]])
- [[pilot.name]] ([[pilot.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)