How can I traverse this optional chained Relay generated code?

1

This is the generated code that came from a graphql generated wordpress endpoint.

  type rec response_menus_edges_node = {
    name: option<string>,
  }
  and response_menus_edges = {
    cursor: option<string>,
    node: option<response_menus_edges_node>,
  }
  and response_menus = {
    edges: option<array<option<response_menus_edges>>>,
  }
  type response = {
    menus: option<response_menus>,
  }

What I came so far is

let default = (props: props) => {
  open Belt
  <div>
    {switch props.menus->Option.flatMap(m => m.edges) {
    | Some(e) => e->Belt.Array.map(e => e->Belt.Option.getWithDefault())
    | None => React.null
    }}
  </div>
}

But I’m lost after that. thanks.

2

Can you show your graphql request?

Did you read about rescript-relay pagination? It provides a getConnectionNodes helper that gives you an array of non-nullable nodes, then it’s easy to work on.

But more generally, when you have deeply nested options in rescript, the easiest solution is just to pattern match on it:

switch res {
| Some({ field1: Some({ nestedField2: Some({ myValue}) }) }) => toString(myValue)
| None => ""
}
1 Like
3 
module Query = %relay(`
  query IndexQuery {
    menu(id: "dGVybToxMQ==") @required(action: LOG) {
      menuItems @required(action: LOG) {
        nodes {
          label @required(action: LOG)
          parentId
        }
      }
    }
  }
`)

this is my query, but yes, optional chaining and getConnectionsNodes should do the job

4

now I see I need to learn more about relay principles more

1 Like