Using Lokka to query Facebook’s SWAPI GraphQL demo

Introducing Lokka — A Simple JavaScript Client for GraphQL

At Kadira, we use GraphQL everywhere. We wanted a simple JavaScript client to query and mutate our GraphQL schemas. That’s why we implemented Lokka.

Let’s see how Lokka works

You can create a client like this:

const Lokka = require('lokka').Lokka;
const Transport = require('lokka-transport-http').Transport;
const client = new Lokka({
  transport: new Transport('http://graphql-swapi.parseapp.com/')
});

Here, Lokka will connect to Facebook’s SWAPI GraphQL demo over HTTP. Using it, we can query data related to Star Wars films.

To get the titles of all the Star Wars films, we simply invoke a query like this:

client.query(`
    {
      allFilms {
        films {
          title
        }
      }
    }
`).then(result => {
    console.log(result.allFilms);
});

We can also create a GraphQL fragment and use it inside a query as follows:

const filmInfo = client.createFragment(`
  fragment on Film {
    title,
    director,
    releaseDate
  }
`);
client.query(`
  {
    allFilms {
      films {
        ...${filmInfo}
      }
    }
  }
`).then(result => {
  console.log(result.allFilms.films);
});

This is just a basic introduction to Lokka. Check out our GitHub repo for more information.

Also, look at these example apps to see how to use Lokka.

• A simple React to-do app
• A React Native app

Why Lokka?

Alongside GraphQL, Facebook released an application framework called Relay based on GraphQL. So, you might be wondering why we implemented something like Lokka. And you might have some other questions. Let me answer some of them.

First of all, why do I need to use Lokka instead of Relay?

Relay is awesome. It does a lot of cool stuff. But, switching to Relay is an organization-wide decision. You may need to rewrite your app from scratch.

Sometimes, we don’t want to switch to Relay but we need to use GraphQL in an existing app. It may be a Redux app, a server-side service, or an Angular app.

That’s where Lokka is going to help you. It’s a simple JavaScript client for GraphQL, which you can use anywhere.

AFAIK, GraphQL doesn’t have a defined transport layer. How does Lokka handle that?

Yes. GraphQL is a thin wrapper and it does not handle the transport layer. That’s why you need to give it a transport layer when creating a Lokka client. See:

const Lokka = require('lokka').Lokka;
const Transport = require('lokka-transport-http').Transport;
const client = new Lokka({
  transport: new Transport('http://graphql-swapi.parseapp.com/')
});

However, there are some well-known transport layers like express-graphql. It has been implemented for some other platforms as well. That’s why we ship a transport layer for Lokka that is compatible with express-graphql.

It’s also very easy to create a new transport layer for Lokka. We’ll have more transport layers soon.

So, Lokka is just a simple wrapper around a transport layer?

Yes, it is.

Even though Lokka is a pretty simple library, it provides some easy ways to handle fragments and invoke mutations. Being a simple solution, you can understand it easily. Most importantly, you can integrate it with existing apps with minimal effort.

Okay. That means, Lokka won’t have any more features?

This is just our first major version. We wanted Lokka to be stable and use it with production apps right away. We could only do that if we implemented the smallest possible thing correctly. (Basically, we released a MVP.)

In future major releases, we’ll have more improvements. Check out our roadmap.

Are you using Lokka in production?

Yes, we are.

As I said before, GraphQL is the heart of our data at Kadira. So, all of our services use Lokka to talk with our GraphQL schemas.

In some parts of the Kadira UI, we use Lokka and GraphQL alongside Meteor.

In the coming months, we’ll port the app behind BulletProof Meteor and Learn GraphQL so that it uses a GraphQL backend. Then, Lokka will be at the center of it.

How about React bindings and co-locate queries with components?

We don’t need any special bindings for that. We could use Redux and Lokka fragments to achieve the same thing. This is a great topic for another blog post, which I’ll publish this week. So, don’t forget to follow Kadira Voice.

How about a Meteor integration?

Yep. That’s also coming.

Basically, we need to implement a new transport layer and some client-side utilities. Stay tuned.