November 8, 2017
Chris Ball
Graphcool is a great service. We got a chance to put it through the paces on a recent React Native project, and I was impressed. Graphcool began as a GraphQL Backend-as-a-Service and recently released the (open source!) Graphcool Framework. The Graphcool Framework manages to bring an instant GraphQL backend to your local machine with minimal effort on your part. All you have to do is define the schema.
Running the Graphcool Framework locally enables you to easily manage your project and develop apps the way you’d develop anything else — using your favorite editor and git. When you’re ready to deploy, you can host the API yourself or use Graphcool’s hosted infrastructure.
Let’s take a look and see how easy it is to get going.
When it’s done, initialize a new git repo & commit the changes.
Running Graphcool locally is optional, but doing so enables you to work anywhere: 🚂 ✈️ ⛺️ ⛱.
It will also prompt you for the location to deploy. For staging & production you’ll likely choose one of the “Shared Cluster” options, but we’re going to choose “local”.
If asked for the service name, just keep the default (api in our case).
If you’re not familiar with GraphiQL, it is an in-browser IDE for GraphQL that allows you to inspect your schema and try out queries, mutations, and subscriptions. GraphiQL is built-in to Graphcool (it’s is called the playground internally).
And create them:
If you want to see detailed information about your schema, just use the green schema tab on the right of the screen.
Automatic CRUD operations are great, but custom functions are some next level awesomeness. Graphcool has 3 types of custom functions available.
There two ways to handle custom functions using Graphcool. We’ve already used the first, which runs a function local to the server. The other option (which is great for integrating with existing systems) is to use a webhook.
For this example, I’ve set up a demo Heroku app that returns some mock data.
If you want to set up a local server to test the webhook, here’s the express code we’re using:
When testing out webhooks of any kind, it’s a good idea to use ngrok to tunnel a publicly accessible https url back to your local machine.
In a follow up article, we’ll take a look at how to run Graphcool inside a CI service to enable true E2E testing of a React Native app.
The good news for now is that syncing up Graphcool staging deploys with your CI process is pretty painless. It works like this:
Recommended links for additional reading:
graphcool-lib examples
Permission rules examples
Wrapping an existing REST API
Graphcool Reference Docs
Chris is CTO at Echobind, a full-service agency specializing in custom web and mobile apps. When he’s not helping developers grow or creating amazing things for clients, you’re likely to find him playing music, cycling, or camping.
