Reason React and Graphql handling ENUM values

Question

Just started to learn reason react and struggle with a graphql setup trying to read an ENUM value.

setup

• reason react
• apollo graphql
• graphql_ppx
• github graphql endpoint

i am fetching the latest pull request data over the github api and reading the status property which is an enum and defined in the gql docs as:

• OPEN
• CLOSED
• MERGED

checking the network tab, i see the states are received as strings. within the application when I log the field i get a bunch of integers reflecting the values. can smb explain me, how i can "print" the data as string to my view and why they are translated to integers? is there somewhere a type generated which i could use for a variant switch?

let stateEnum = data->map(node => node##state);
Js.log(stateEnum) // possible values: 880069578, 982149804 or -1059826260
// somehow switch these values here?! :)
// current type of `stateEnum` is option('a)

thanks a lot in advance and have a nice day!

Answer 1

GraphQL Enums are represented as Reason polymorphic variants. Under the hood, in runtime, they are just integers. If you want to display them to the user you have two options: 1. Map them to string by hand using a switch

let status = 
  switch(node#status) {
    | `OPEN => “Open”
    // other cases
  }

2. You can use BuckleScript functionality do generate jsConverters:

[@bs.deriving jsConverter]
type status = [ |`OPEN | `CLOSED /* other cases */]

this will generate two functions for you: statusToJs and statusFromJs. They help you convert variant to and from string.

Here is BuckleScript documentation about it: https://bucklescript.github.io/docs/en/generate-converters-accessors#convert-between-js-string-enum-and-bs-polymorphic-variant

Answer 2

As @Herku mentioned in his comment, the key was just to do this:

// asume that your enum is on a gqp property called `state`
// and we use the built in lib `Belt.Option` and the fn `getWithDefault`
// this way we are sure, that `stateEnum` is defined with one of the valid enum values
let stateEnum = data->map(node => node##state)->getWithDefault(`OPEN);

// next we switch the polymorphic variant
let state = switch(stateEnum) {
 | `OPEN => "open"
 | `CLOSED => "close"
 | `MERGED` => "merged"
}

// str = let str = ReasonReact.string;
str(state);