@bkonkle/graft

Graft

A ReasonML solution for type-safe querying against an automatic GraphQL backend.

Graft helps you set up a Postgraphile backend based on PostgreSQL, Express, and Apollo, and then connect to it using ReasonML on the front end. An example client implementation will be included using reason-react and reason-apollo.

Setup

API

To set up a simple API follow the tag-monster-api example to quickly bootstrap a PostgreSQL database and introspect the schema to create an automatic GraphQL interface.

Bring your own ORM or query builder. The example above uses Knex, with a simple initial migration. Follow the instructions in the README to set up a root user and build the schema.

Next, set up an application-specific config file like this example.

From there, you can throw together a quick server init script like this example that uses Graft.Server.make() to start an Express server.

React Client

To connect to your brand new API from React, create a new ReasonML module in your React application to serve as your API Client. For more information on setting up ReasonML, take a look at the reason-react docs.

$ yarn add --dev @bkonkle/graft

bsconfig.json:

{
  "bs-dependencies": ["reason-react", "reason-apollo"],
  "ppx-flags": ["graphql_ppx/ppx"]
}

src/data/ApiClient.re:

let client =
  Graft.Client.make(
    ~uri=Config.Api.endpoint,
    ~getSession=Graft.Browser.Session.get,
    ~connectToDevTools=Config.Env.isDev ? true : false,
    (),
  );

Now, you can start querying with reason-apollo!

open Graft.Client;

module GetTag = [%graphql
  {|
    query GetTag($id: UUID!) {
      tagById(id: $id) {
        id
        name
        slug
      }
    }
  |}
];

let getTag =
  (. id) => ApiClient.client |> query(~request=GetTag.make(~id, ()));

/**
 * Plain JS interface
 */
let default = {"getTag": getTag};

This exposes a default export with a "getTag" property that allows plain JavaScript modules to use the getTag() function to fire queries. The return value is a standard Apollo Client promise.

Notice that this is not exclusive to React in any way. It's currently un-tested, but it should be possible to use with other libraries as well.

Development

The core of the application is an Express server with some middleware:

• express-promise-router
• body-parser
• cors

Install dependencies with Yarn:

$ yarn

This should install the ReasonML and BuckleScript platform to compile the code to JavaScript.