The Parse Server GraphQL API follows latest standards currently available for highly-scalable APIs and ambitious front-end projects.

The Parse Open Source Team choose to follow the GraphQL Server Relay Specification.

Relay is a JavaScript framework for building data-driven React applications powered by GraphQL, designed from the ground up to be easy to use, extensible and, most of all, performant. Relay accomplishes this with static queries and ahead-of-time code generation.

Starting from Parse 3.10, full compatibility with Relay is implemented. This document will walk you through those implementations

First of all, it’s necessary to make sure that you have an existing app created at Back4App. However, if you are a new user, you can check this tutorial to learn how to create one.

In your newly created App, go to the Database Browser and click the Create a class button

Choose to create a Custom class and give it a name. Following the Relay example schema, I created the classes Faction, Ship, and others as described with matching properties, but you can create your classes to follow this documentation. Just change your queries and mutations accordingly. Remember that by convention classes start with an Uppercase letter, are CamelCase, and do not contain special characters such as spaces and symbols. Click Create class when you’re done.

With your Classes and Properties created, you can go to the API Console and then GraphQL Console to execute your queries and mutations.

Our very first query will retrieve an object based on its objectId (not to confuse with id). Parse has evolved and now queries support both ObjectId, formerly known as id in previous versions, but now also supports Global Id, known as id, which refers to Relay’s global ID and has a longer format as it contains the classname encrypted into it.

Example of ObjectId: EaT0dDk09v Example of id (a.k.a. Global id): RmFjdGlvbjpFYVQwZERrMDl2

Let’s make our very first query retrieving an object by its ObjectId:

That will output

Now, let’s change that for the GlobalId for Relay:

And notice that the result will be the same:

This happens because the Global Id works, as its name implies, globally, and has the class name encrypted into it, so Parse knows where to search for that ID.

Also with the Global Id you can prefetch like Relay’s specification as follows:

which will result in

Relay’s connections work the same way in Parse with GraphQL, so, if you need to retrieve the Rebel’s ships:

which will result:

You can also retrieve the Nth ships:

resulting in

Or retrieve the Nth ship after a specific one, using its cursor value:

which will retrieve:

We can also use Mutations compatible with Relay’s mutations. Let’s create a new Ship:

That needs the following Query Variable:

And will return the Global Id and name as specified in the mutation: