React-Apollo and Recompose Live: Part 2

Graphcool, Apollo and Recompose walk into a bar…

Get caught up by reading Part 1. The quick recap is that I needed to know if the sudo code from this article worked and how it worked. I first tried it with Graphcool but it looked to different from the demo code so I put it on hold. This is the Graphcool story. See Part 3 for the dirty details.

This is the code from the end of Part 1 which connects to a GraphQL server hosted on Apollo Launchpad and a MongoDB database on mLab.

Ultimately, all we have to do is change the endpoint to the Graphcool endpoint, modify the query to conform to the format Graphcool prefers and lastly, modify how the server response shows up in the app.

Implementing Graphcool’s Backend In The App

The first thing we do is branch the app.

git checkout -b books-compose-graphcool

Then go to Graphcool to get your endpoint. Get it by clicking on the endpoints button in the bottom right of your dashboard.

Copy the endpoint then go into App.js in your branched project. Paste the url into Apollo Client’s networkInterface.

Go to ./components/branch-complete.jsx and change the query to our new query then change all instance of ‘keyword’ to ‘filter’ and ‘getKeyword’ to ‘getFilter’. We chose to name the variable after the field in the schema so we have to change everywhere we call it. There is probably a functional way to do this but this works for now. Please do comment with how you would do it in the functional style if it comes to you immediately.

This is what the end result looks like.

Let’s run the app to make sure it still works.

npm start

It still works! So now let’s deploy it courtesy of Now and create-react-app now.

npm run deploy

This is the live demo running on a Graphcool Backend.

Programming with Others

If you think I have a clue with this javascript thing, I’m open to working in Paris, or anywhere in Europe. Thanks for listening.


Explaining this in writing helps me learn and remember. So does you asking me questions. Any questions?