Github User API Meteor Graphql App Using polymer-apollo
git clone [email protected]:aruntk/polymer-apollo-meteor-demo.git your-app-folderType the following in shell. Script install bower components and npm packages.
#shell
cd your-app-folder
./build.shmeteorgraphiql link - http://localhost:3000/graphiql
// /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,
});/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
}
`];///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);
}
);
});
},
},
};
/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});/imports/ui/components/apollo-test.html
<!-- /imports/ui/components/apollo-test.html -->
<dom-module id="apollo-test">
<template>
<style>
...
</style>
<div class="apollo">
<div class="layout horizontal">
<iron-a11y-keys id="a11y" target="[[target]]" keys="enter" on-keys-pressed="fetch"></iron-a11y-keys>
<paper-input class="flex" id="input" label="Github Username" value="[[username]]"></paper-input>
<paper-button on-tap="fetch">Fetch</paper-button>
</div>
<div class="vertical layout center">
<paper-spinner active="{{loading}}">
</paper-spinner>
<div class="vertical layout center center-justified contents" hidden="{{error}}">
<img src="{{github.avatar_url}}" hidden="{{!github.avatar_url}}" class="avatar"/>
<div hidden="{{!github.name}}">Name: [[github.name]]</div>
<div hidden="{{!github.html_url}}">Profile :
<a href="[[github.html_url]]">[[github.html_url]]</a>
</div>
<div hidden="{{!github.public_repos}}">Repos : [[github.public_repos]]</div>
</div>
<div class="vertical layout center" hidden="{{!error}}">
{{error}}
</div>
</div>
</div>
</template>
</dom-module>// /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 .
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent