Realm Blog

Realm Scales to the Web with GraphQL

In the last 7 years, Realm has been focused on perfecting the solution to a problem that mobile engineers and companies have faced for years: how to store data efficiently on the device and reliably receive and push data into the cloud.

Realm Middleware for Web

Realm’s offline-first approach to synchronization has eliminated many of the dependencies and issues that developers had previously had to deal with. Now, Realm is expanding their offering to the web! 🎉

Realm + GraphQL

After we launched Realm Platform, we heard our customers requests for front-end web support. Traditionally building a realtime app using Realm on the web has been a challenge. You can use realm-js or realm-dotnet to incorporate Realm data into a backend web server, but front-end work in the browser was not possible due to environment limitations.

In order to deliver Realm data to web frameworks, we pursued two approaches. First, we explored building traditional REST and Websockets APIs. Secondarily, we experimented with GraphQL, utilizing it in the 1.0 Realm Object Server web dashboard. In comparing the two efforts, we realized that GraphQL was a much better fit. Realm’s schema model is highly compatible with that of GraphQL. Realm is an object-database which supports links as a first-class type. This allows developers to build complex object-graphs especially because Realm uses advanced memory management to efficiently traverse a graph in their apps. However, this breaks down with a web API. When you perform a GET request to query for data in a Realm, how do you know what part of the graph to return?

With a traditional REST API you can choose to return linked objects through keys in the JSON, which results in making multiple requests to retrieve the data needed from the graph. We also explored adding a depth parameter to allow the request to specify which linked data to return.

Ultimately, this discussion started to look more and more like GraphQL!

The GraphQL query language allows developers to define what data they want returned in the API. This works off a defined schema, mapping perfectly to the Realm object model, and results in collapsing of multiple traditional REST API requests. Furthermore, the GraphQL spec also includes the concept of subscriptions allowing a developer to subscribe to realtime data events.

Putting it all together it became obvious that Realm was a great fit for GraphQL and vice-versa. As a result, today we are announcing support for GraphQL in Realm Object Server. This brings similar expressive realtime data access that Realm Database SDKs provide for mobile to the web.

Terse, Simple, Elegant

GraphQL offers a very terse, yet expressive way to interact with your backend.

const query = gql`
  query {
    companies {
      companyId
      name
      address
    }
  }`;
 
const response = await client.query({
  query: query
});

const companies = result.data.companies;
const mutation = gql`
  mutation {
    result: addCompany(input: {
      companyId: "some-unique-id"
      name: "My Amazing Company"
      address: "Mars"
    }) {
      companyId
      name
      address
    }
  }`;

const response = await client.mutate({
  mutation: mutation
});

const addedCompany = response.data.result;

Simply define queries, mutations.

Efficient

One of the problems inherent to REST is that you’re dealing with Resources. This means that even if you only need a portion of data to populate your web UI, you still need to pull the entire resource.

Let’s take a look at an example.

const UserSchema = {
       name: 'User', 
       properties: {                
               userId: 'string',
               firstName: 'string', 
               lastName: 'string', 
               birthday: 'date',
               accounts: {type: 'Account[]'}
       } 
}; 
const AccountSchema = { 
     name: 'Account', 
     properties: { 
             AccountId: 'string',
             name: 'string', 
             openDate: 'date'
     } 
};

If you were building a view where you needed the user’s, firstName and userId to display. You would still need to fetch the entire user (e.g.GET /users/{id}) to get those pieces of data. The user may have a dozen other properties that are not important for this page.

Furthermore, if you wanted to pull back the name of the top 3 accounts for each user, you’d need to make additional REST calls to get each object, just so you could reference the name of each.

One typical workaround for this is to create Composite Resources for this (e.g. UserAccountSummary). While this addresses efficiency concerns in bandwidth and speed, it also leads to potential data redundancy or additional code on your server end to munge this data together.

GraphQL queries solve this problem quite elegantly by allowing you to specify only the data you need.

const query = gql`
  query {
    users {
        firstName
        userId
        accounts { 
            name 
        }
    }
  }`;

Notice that this query is only fetching the specific fields it needs for the client, not only is this extremely efficient for speed and bandwidth as we’ve discussed. It’s also simpler for developers to read. It reduces the cognitive load of reading the code, seeing only what data is being consumed on the client and nothing more.

Powerful Realtime Subscription model

The GraphQL subscription model is a perfect fit for Realm’s live, reactive nature.

const subscription = gql` // Subscribed to updates.
  subscription {
    users {
        firstName
        userId
        accounts { 
            name 
        }
    }
  }`;

Notice, by simply changing the query to a subscription, updates to the underlying data will automatically synchronize from Realm to the client in real-time. There is literally nothing else the developer has to do to make all of this work. Notice that just as with mobile, Realm Web, also will trigger an update if any updates to the underlying database affect the results. This all creates a simple, intuitive, experience for developers.

Thriving Community

GraphQL is a proven technology and has a thriving developer community with numerous support channels from forums and Slack groups to videos and blogs.

The Future

GraphQL and Realm is a great pairing for the web, and the next step toward building reactive, data centric applications on the web. You can try it out for yourself by running the Realm Object Server w/ GraphQL, available here. We’ve also created a sample client here. We hope you’ll check it out and give us your feedback!

Cheers! 🎉

The Realm Team


Realm Team

At Realm, our mission is to help developers build better apps faster. We provide a unique set of tools and platform technologies designed to make it easy for developers to build apps with sophisticated, powerful features — things like realtime collaboration, augmented reality, live data synchronization, offline experiences, messaging, and more.

Everything we build is developed with an eye toward enabling developers for what we believe the mobile internet evolves into — an open network of billions of users and trillions of devices, and realtime interactivity across them all.

Get more development news like this