A Beginner’s Journey into GraphQL - Part 3
It’s been a journey learning GraphQL and React. I’ve gone through a variety of resources, made multiple iterations of my project, and dealt with a lot of early-stage user bugs with GraphQL APIs. I talked about a few of them in Part 2 of this series, but as I’ve worked through the project, I unearthed more.
End Result
After many trials and tribulations, I made a basic version of the project I outlined in Part 2. I made an app that displays my stats on GitHub. I’ll post the code on this GitHub repo and all you need to do is change the GitHub login ID to yours in a few places and it will pull up your stats too.
How to find your GitHub stats:
1. Clone the GitHub repo either by downloading from the website or typing $ git clone repo_url in terminal (Mac).
2. Retrieve your GitHub API token and replace it in index.js where I've written BEARER_TOKEN
3. Change the login ID wherever it says "owner: " to your GitHub ID and "name: " to a project name.
4. Type the following sequence of commands on GitHub:
$ cd dir_name
$ npm install
$ npm start
5. Open up localhost:3000/ in your browser for you to test out your web app. Troubleshooting
I mentioned in the previous post how I was unable to move data from forms into a GraphQL query and how a proxy server was required to be set up to use some APIs. Other than that, I also ran into a couple of other minor issues such as passing in parameters, that I found solutions to on Google.
Authentication
It was difficult finding documentation on how to authenticate the endpoint I was using. GitHub provided a URI and gave me my token, but piecing it together took time.
import React from 'react'
import { Router, Route, browserHistory } from 'react-router'
import { ApolloClient, createNetworkInterface } from 'apollo-client'
import { ApolloProvider } from 'react-apollo'
import App from './components/App.js'const networkInterface = createNetworkInterface('https://api.github.com/graphql');networkInterface.use([{
applyMiddleware(req, next) {
if (!req.options.headers) {
req.options.headers = {}; // Create the header object if needed.
} // Send the login token in the Authorization header
req.options.headers.authorization = `Bearer TOKEN`;
next();
}
}]);const client = new ApolloClient({
networkInterface,
});function routeForRepository(variable_name) { return {
title: `${variable_name}`,
component: Repository,
owner,
name
}}ReactDOM.render( (
<ApolloProvider client={client}>
<App {...this.routeForRepository('variable_val')} />
</ApolloProvider>
),
document.getElementById('root')
)
What I learnt
It’s going to be a while before GraphQL APIs are good enough for new users to use without running into major issues. The community is still growing and it’s important for those using the APIs to submit bugs to the companies that make them. User feedback is needed for these APIs to develop and be useful to noobs like me. Furthermore, more companies need to adopt this framework for their APIs as this would expand the network size of developers hoping on the GraphQL train.
One last thing, if you want to check out the resources I’ve used over this journey, check them out in this repo
This post is a part of a series, you can read the other posts here
A Beginner’s Journey into GraphQL — Part 0
