In 2011 I started using a kindle and loved it's ease and portability. The quality and quantity of my reading increased but I missed being able to glance at shelf of titles and recall the pleasure of reading them. I started noting down the books I read in Google sheets and have always wanted to build a little project around that data. I use side projects as a chance to learn new technologies and pick up new skills - in this case I wanted to try out GraphQL. The final project can be found here.
Me, Reading and this Blog
The list of books in Google sheets has been incredibly useful not only in helping me remember what I've read but also to help me analyse and expand the range of literature I consume. In a couple of previous posts in this blog I've written in more detail about what I've been trying to achieve: book balance and accidental sexist. I wanted to be able to use this project to make public not only the list of books but this breakdown of the authors and more.
Books Project
The first part of ths project was to work out how to get the data from Google sheets into a server and expose that via an API. From there I could use the data to build out a little site showing the books I've read and any interesting analytics. I've heard a whole bunch about GraphQL via blogs and twitter - and especially Henrik Jorteg. Tweets such as the following suggested I could get started with a familiar data set and server setup and have a little go at using GrapQL.
It's surprising how many think you need Relay or a graph-like data structure to benefit from GraphQL.
— Henrik Joreteg (@HenrikJor eteg) June 22, 2018
As a first step you can just go through your app and replace JSON fetches for GraphQL fetches with zero new libraries.
At least you'll only be fetching what you actually use.
What is GraphQL?
My take on GraphQL - it allows you to determine on the front end of your app what data you want. It reduces the amount of backend work and means you can have efficient calls for the right amount of data. There will be a couple of examples at the end of this using the book project I've setup.
Using GraphQL
To start I forked my node based seed project and following the instructions on the GraphQL page I produced an initial test setup. The next step was to get the data from google sheets and setup a more suitable schema.
Getting data from Google Sheets
Google sheets help run my life! From holidays, expenses through to over 11 years of exercise data they are a great, easy to use and accessible tool. I still wanted to use sheets to update my books but just wanted to be able to get that data out into an app. From sheets the File -> Publish To The Web option fitted into what I wanted. I made a consolidate page available to the public in CSV form which you can see here.
Plugging it all together
In my app I called off to google sheets, ran the CSV through a converter to JSON and update the GraphQL schema to reflect a few additional data fields. You can see the results at the GraphQL endpoint on the live app here. Click the button that looks like a play button and you'll get back the full list of books!
In this example you get back all the fields but you can update the query to only return the data you actually want. For example in the previous posts in this blog I've been looking at the gender of the authors I've read (currently only male and female but the field is a string as I'm looking for recommendations of non binary authors if you can help). A query for that would look like this
Conclusion
Things worked as I wanted! Book data available for a node server to pick up, transform into JSON and expose via a GraphQL endpoint. A fairly straightforward set of data to dip my toes into the GraphQL landscape and give me the confidence to experiment in a more complex scenario. You can see the final project at https://books.mikemjharris.com/ and the code for it is on github - watch out for a second part to this blog where I build out a better front end. Hoping to use that opportunity to try out Vue. Let's see how it goes.
Update - 10th Feb 2019
Published second part of this post Books Project Part 2. The final front end if finished now so links to the main project reflect the finished work.