Polymer-Apollo Meteor Demo

Github User API Meteor Graphql App Using polymer-apollo

Installation.

Clone the repo

git clone [email protected]:aruntk/polymer-apollo-meteor-demo.git your-app-folder

change remote url.

Build

Type the following in shell. Script install bower components and npm packages.

#shell
cd your-app-folder
./build.sh

Running

meteor

graphiql link - http://localhost:3000/graphiql

Usage

Server

Setting Up Apollo Graphql Server

/server/apollo.js

// /server/apollo.js

import { createApolloServer } from 'meteor/apollo';
import { makeExecutableSchema, addMockFunctionsToSchema } from 'graphql-tools';

import { typeDefs } from '/imports/api/schema';
import { resolvers } from '/imports/api/resolvers';

const schema = makeExecutableSchema({
  typeDefs,
  resolvers,
});

createApolloServer({
  schema,
});

Schema

/imports/api/schema.js

/imports/api/schema.js

export const typeDefs = [`
type github {
  login: String
  id: String
...
  created_at: String
  updated_at: String
}
type Query {
  github(username: String!) : github
}
schema {
  query: Query
}
`];

Resolver

/imports/api/resolvers.js

///imports/api/resolvers.js

import { HTTP } from "meteor/http";
export const resolvers = {
  Query: {
    github(root, { username }, context) {
      return new Promise((resolve,reject) => {
        HTTP.call("GET", `https://api.github.com/users/${username}`,{
          headers:{
            "User-Agent": "meteor-polymer-apollo-demo"
          }
        },
          (error,result)=>{
            if(error){
              return reject(error);
            }
            return resolve(result.data);
          }
        );
      });
    },
  },
};

Client

Creating PolymerApolloBehavior

/imports/startup/client/apollo.js

// /imports/startup/client/apollo.js

import ApolloClient from 'apollo-client';
import { meteorClientConfig } from 'meteor/apollo';
import { PolymerApollo } from 'polymer-apollo';

const apolloClient = new ApolloClient(meteorClientConfig());
window.PolymerApolloBehavior = new PolymerApollo({apolloClient});

Creating a Polymer element

/imports/ui/components/apollo-test.html

<style> ... </style>

Fetch

Name: [[github.name]]

Profile : [[github.html_url]]

Repos : [[github.public_repos]]

{{error}}

```js
// /imports/ui/components/apollo-test.html
import gql from 'graphql-tag';
Polymer({
  is:"apollo-test",
  behaviors:[PolymerApolloBehavior],
  properties:{
    github:{
      type:Object,
      value:{}
    },
    username:{
      type:String,
      value:"aruntk",
    },
    loading:Boolean,
    error:String,
    target: {
      type: Object,
      value: function() {
        return this.$.input;
      }
    },
  },

  apollo: {
    // Query with parameters
    github: {
      query: gql`query github($username: String!) {
        github(username: $username){
          avatar_url,
          html_url,
          name,
          public_repos
        }
      }`,
      variables: {
        username: 'username'
      },
      error(error){
        this.set("github",{});
        this.set("error",error.message);
      },
      loadingKey:"loading"
        // Additional options here
    },
  },
  fetch:function(){
    const inp = this.$.input.value;
    this.set("error","");
    this.set("username",inp);
  }
});

Meteor Polymer integration is done with the help of Synthesis - Polymer compiler and meteor polymer data mixin from meteorwebcomponents .