Relay Compatibility

15 min

relay compatibility introduction 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 https //relay dev/docs/en/graphql server specification 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 https //relay dev/docs/en/graphql server specification is implemented this document will walk you through those implementations prerequisites to begin with this tutorial, you will need an app created at back4app see the create new app tutorial https //www back4app com/docs/get started/new parse app to learn how to create an app at back4app 1 create a new back4app app 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 https //www back4app com/docs/get started/new parse app to learn how to create one 2 create a few classes 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 https //relay dev/docs/en/graphql server specification#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 3 graphql console with your classes and properties created, you can go to the \api console\ and then \graphql console\ to execute your queries and mutations 4 queries 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\ 1 query rebelsquery { 2 faction(id "eat0ddk09v") { 3 objectid #objectid for parse 4 id #globalid for relay 5 name #n 6 } 7 } that will output 1 { 2 "data" { 3 "faction" { 4 "objectid" "eat0ddk09v", 5 "id" "rmfjdglvbjpfyvqwzerrmdl2", 6 "name" "galactic empire" 7 } 8 } 9 } now, let’s change that for the globalid for relay 1 query rebelsquery { 2 faction(id "rmfjdglvbjpfyvqwzerrmdl2") { 3 objectid #objectid for parse 4 id #globalid for relay 5 name #n 6 } 7 } and notice that the result will be the same 1 { 2 "data" { 3 "faction" { 4 "objectid" "eat0ddk09v", 5 "id" "rmfjdglvbjpfyvqwzerrmdl2", 6 "name" "galactic empire" 7 } 8 } 9 } 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 5 refetching also with the \global id\ you can prefetch like relay’s specification https //relay dev/docs/en/graphql server specification#object identification as follows 1 query refetchquery{ 2 node(id "rmfjdglvbjpfyvqwzerrmdl2"){ 3 id on faction{ 4 name 5 } 6 } 7 } which will result in 1 { 2 "data" { 3 "node" { 4 "id" "rmfjdglvbjpfyvqwzerrmdl2", 5 "name" "galactic empire" 6 } 7 } 8 } 6 connections relay’s connections https //relay dev/docs/en/graphql server specification#connections work the same way in parse with graphql, so, if you need to retrieve the rebel’s ships 1 query rebelsshipsquery { 2 faction(id "rmfjdglvbjphctaznklsz2rq"){ 3 objectid 4 name 5 ships{ 6 edges{ 7 node{ 8 name 9 } 10 } 11 } 12 } 13 } which will result 1 { 2 "data" { 3 "faction" { 4 "objectid" "aq036irgdp", 5 "name" "alliance to restore the republic", 6 "ships" { 7 "edges" \[ 8 { 9 "node" { 10 "name" "y wing" 11 } 12 }, 13 { 14 "node" { 15 "name" "x wing" 16 } 17 } 18 ] 19 } 20 } 21 } 22 } you can also retrieve the nth ships 1 query rebelsshipsquery { 2 faction(id "rmfjdglvbjphctaznklsz2rq"){ 3 objectid 4 name 5 ships(first 1){ 6 edges{ 7 node{ 8 name 9 } 10 } 11 } 12 } 13 } resulting in 1 { 2 "data" { 3 "faction" { 4 "objectid" "aq036irgdp", 5 "name" "alliance to restore the republic", 6 "ships" { 7 "edges" \[ 8 { 9 cursor 10 "node" { 11 "name" "y wing" 12 } 13 } 14 ] 15 } 16 } 17 } 18 } or retrieve the nth ship after a specific one, using its cursor value 1 query rebelsshipsquery { 2 faction(id "rmfjdglvbjphctaznklsz2rq"){ 3 objectid 4 name 5 ships(first 1 after "yxjyyxljb25uzwn0aw9uoja"){ #cursor for the y wing ship 6 edges{ 7 cursor 8 node{ 9 name 10 } 11 } 12 } 13 } 14 } which will retrieve 1 { 2 "data" { 3 "faction" { 4 "objectid" "aq036irgdp", 5 "name" "alliance to restore the republic", 6 "ships" { 7 "edges" \[ 8 { 9 "cursor" "yxjyyxljb25uzwn0aw9uoje=", 10 "node" { 11 "name" "x wing" 12 } 13 } 14 ] 15 } 16 } 17 } 18 } 7 mutations we can also use mutations compatible with relay’s mutations https //relay dev/docs/en/graphql server specification#mutations let’s create a new \ship\ 1 mutation createbwing($input createshipinput!){ 2 createship(input $input){ 3 ship{ 4 id 5 name 6 } 7 } 8 } that needs the following query variable 1 { 2 "input" { 3 "fields" { 4 "name" "b wing" 5 } 6 } 7 } and will return the \global id\ and \name\ as specified in the mutation 1 { 2 "data" { 3 "createship" { 4 "ship" { 5 "id" "u2hpcdpxb21qznvzexvf", 6 "name" "b wing" 7 } 8 } 9 } 10 }