A Beginner’s Journey into GraphQL - Part 2
Now that I have a (slightly) better understanding of the community behind GraphQL and the problems it’s best suited to solving, it’s time to jump in and put what I’ve learned to work.
How do you define a repo’s street cred?
My project was inspired by an article I read on Hacker Noon about the most popular JavaScript projects on GitHub. This made me wonder what metrics went into measuring ‘popularity’ of a project, and consequently the ‘street cred’ of a developer.
I’ll try to build an app that uses a combination of Pull Requests, Commits, and Stargazer to measure a developer’s ‘cred’ with the latest GitHub GraphQL API.
Dynamic queries are tricky
I know others may have opposing views on what metrics go into this ‘street cred’ measure, and it would be cool if my app let users select their own metrics, but that’s where the limitations of GraphQL with the Apollo client come in (at least it’s difficult for a beginner to figure it out).
GraphQL queries need to be placed outside of a React Component, which makes it difficult to pass input data from a form to a query and back.
const gqlQuery = graphql( gql`
query queryName($variable_name = Type!) {...}`, {
options: ({ variable_name }) => {
return {
variables: variable_value
}
}
});class className extends React.Component {
constructor(props) {
super(props);
this.state = {...};
}
render() {
return {...}
}
}const classNameWithInfo = gqlQuery(className);
export default classNameWithInfo;
Regular queries too
I also discovered that some GraphQL APIs don’t support CORS and so, reject any request made client-side. I was exploring the Yelp API when I ran into this issue, along with a few others. Matt Creager built a sick proxy that essentially took care of all the authentication and authorization before forwarding requests from my client-side app to the Yelp API—if you run into the same issue, nudge him, I’m sure he’ll open source it .
Progress!
After facing all those troubles, and changing my project a couple of times, I’m finally getting somewhere. I setup the API endpoint and it’s working (with hardcoded variables)!
So what have I learned? GraphQL is super useful and it’s only going to continue to improve as more developers adopt it, find bugs and report them.
If you have any comments, suggestions, or tips, leave them in the comments down below, or tweet me @sitara_ramesh. Stay tuned for the grande finale post!
Oh, and in case you missed it—I’m sharing the resources I find helpful in this repo.
This post is a part of a series, read the next post.
A Beginner’s Journey into GraphQL — Part 3
Or, if you’re behind check out the first two posts.
