React-Apollo and Recompose Live: Part 3

Learning Javascript The Hard Way

Tutorials you see around the nets are so clean. I just realized that you almost feel like an idiot with the super short, do this, do that style. I now know that that is the cleaned up version of things. This is what really happened when I was trying to do Part 1 & Part 2.

So after doing all that MongoDB set up(was not very long, but still), I thought,

If I can run a regex query in noSql, then I must be able to do it mySql.

Then I remember asking Sashko Stubailo in the Apollo Slack Channel how he would have done it. This is one of those stupid questions I ask to pick someone’s brain. I already had a working solution but needed to know how the pro would have done it.

The stupid question gamble works again. I’ve seen mySql once or twice and code is code so I’m thinking I should recognize something like the “LIKE” query mentioned in the chat in the resolvers Graphcool generates for us. I go into the Graphcool playground, open the docs and search for the field title which is the field I had the regex operator on in the MongoDB version.

There it is! `title_contains: String`

So I try this to run this query:

query findIt($filter:BookFilter){
  allBooks(filter:$filter ){

And it works:

Not for nothing, Graphcool is an amazing service. Their Graphiql Playground is sharp and full featured. I almost feel like its too much GUI. But thats ok because they have a command line tool, graphcool-cli, as well. Their customer service is great. Their commitment to open source and education is right up there with Apollo. Both of these outfits are awesome. I wish Relay had a crew like these guys. Now that I think about it, maybe Graphcool is that crew.

One of the things I really enjoyed about this process was that Graphcool forces you to use schemas that are compliant with the GraphQL IDL or Interface Design Language.

By force I mean, that if you try to run the schema we used in Part 1 into Graphcool it will kick it back. You really get the feeling that Graphcool is home for ‘the Serious GraphQL Enthusiast’.

It feels like a schema you write for Graphcool is more portable. By using that syntax, Graphcool can provide you with an endpoint for both GraphQL and Relay clients out of the box. This is huge from a service point of view but big for me because Relay is really where I like to operate. So what does our simple schema look like in IDL syntax?

Wait. Big problem here. There are no resolvers. What in the hell is a GraphQL relation? See this post from Apollo for a good explanation. I’ve used directives in Relay but not in a simple GraphQL schema like this one. By using the directive here we make sure our schema will be both GraphQL and Relay client compliant. Both technologies use the IDL and Relay is actively working to get as close as possible to the spec. It appeals to me then to get my head around writing schemas using the directive syntax even in GraphQL targeted schema’s.

Regarding the resolvers, input types, etc, Graphcool is going to write them for you. You will get the most robust schema you have ever seen and from just the 17 lines above. If you don’t get a Graphcool account, which you should, you can get started by installing graphql-up with NPM and passing it a schema in the form of a schema.graphql file. Try it out by downloading the gist then running these commands.

`npm install --global graphql-up`
`graphql-up books-recompose-schema.graphql`

You will get a console message with an endpoint for your GraphQL queries and one for your Relay queries.

✔ Your GraphQL API is ready to use. Here are your endpoints:
 ❯ Simple API:
 ❯ Relay API: your GraphQL endpoint in a browser to use the interactive API Playground.API Documentation:

Click on one your generated links, open the Graphiql Playground docs and take a looks at the available queries, mutations and subscriptions. I used to write some of that.

I used to not know what most of that meant. Working in Graphcool has forced me to go deeper into the spec to understand the gibberish. Whether you use Graphcool or not, I recommend diving deeper into the spec when you are writing your schemas.

To see what your generated schema looks like in long form, install fetch-graphql-schema and run it on your endpoint.

npm install --global fetch-graphql-schema
fetch-graphql-schema > myschema.graphql

The output is 960 lines of schema and too big to embed in this article. Check out the gist. Every kind of resolver, query, mutation, subscription your heart desires and you only wrote 2 barebones GraphQL types worth of schema. Now you can spend your time figuring out how to use them instead of how to write them. Good luck writing those resolvers on your own.

In Part 1 we generated some fake JSON. We need to import that into Graphcool. The Graphcool-Examples repo has some import utility scripts they kindly shared. I had to refactor them to conform to my JSON structure. That was not very fun but oh so good. Its just javascript and functions folks. There are not that many of them built in.

So when the script kicked back my fake json file, I had to start digging. I did the “You dont know how to debug” debug. I built the script back up one function at a time to make sure I knew exactly what was going on. I know that I could have just changed the JSON sample to the structure in the Graphcool examples in about a minute but that would not have felt right. Kublai would not have been happy. This is the final working import script for the data in this project.

Two things tripped me up. The first was that the import script skipped the created the author fields on each book, didn’t include the author. I realized later that the script uses the created old Id to map the book and author back to each other. Nice trick! The second thing was that the author field was actor field in the sample script was an array whereas I had it as an object, so didn’t work, obviously! I never did get the script to run on 1000 objects without erroring out. When I tried 498 and it worked, I moved on. I need to learn about debugging that kind of error.

As I kept working through I went to check the endpoint for the data, and it turns out graphql-up generated endpoints don’t show up in your account so I could not delete the partially executed imports. I might have 10 stray endpoints out there now. Heads up Graphcool! I hit the graphcool slack channel ask about that. Answer:

“AFAIK, that’s not possible. You can use the graphcool-cli instead of graphql-up, with the same .graphql schema file, to create a project under your own account”

Thanks for the super fast response @agartha, whoever you are. I love #FOSS! Let me go ahead and plug his Graphcool Schema Filters Cheetsheet for GraphQL. Better yet, take a look right now.

I decided not to get the cli just yet to see if this would work without it but that did not last long. Go ahead and get an account. Its free. Save yourself the trouble. Random Tip: Webstorm markdown now supports ```graphql as a code block tag. Very nice.

I got a lot of functional programming into my fingers. I got to read and understand some good code written by some serious programmers. I got exposed to Recompose which I had not seen before this experiment. Mostly though, I was reacquainted with Apollo which I had not spent time in since the early days of GraphQL which coincided with the very beginning of my learning programming from scratch. Think about that for a second. I dont know anything about Javascript or any other programming language and I jump into GraphQL. Learn Javascript The Hard Way.

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?

jsComplete EdgeCoders

We write about the new and leading edge technologies with a focus on JavaScript


Written by


Interests include Living Free, Biz, Tech and employment ( Blindly stumbling towards fullstack competency. I ❤ Open Source

jsComplete EdgeCoders

We write about the new and leading edge technologies with a focus on JavaScript