Unable to iterate graphql response


#1

Tinkering with the Spacex graphql API and I’m getting this back:

> {"data":{"launches":[{"flight_number":1,"mission_name":"FalconSat","launch_year":2006,"__typename":"Launch"},{"flight_number":2,"mission_name":"DemoSat","launch_year":2007,"__typename":"Launch"},{"flight_number":3,"mission_name":"Trailblazer","launch_year":2008,"__typename":"Launch"},{"flight_number":4,"mission_name":"RatSat","launch_year":2008,"__typename":"Launch"},{"flight_number":5,"mission_name":"RazakSat","launch_year":2009,"__typename":"Launch"},{"flight_number":6,"mission_name":"Falcon 9 Test Flight","launch_year":2010,"__typename":"Launch"},{"flight_number":7,"mission_name":"COTS 1","launch_year":2010,"__typename":"Launch"},{"flight_number":8,"mission_name":"COTS 2","launch_year":2012,"__typename":"Launch"},{"flight_number":9,"mission_name":"CRS-1","launch_year":2012,"__typename":"Launch"},{"flight_number":10,"mission_name":"CRS-2","launch_year":2013,"__typename":"Launch"},{"flight_number":11,"mission_name":"CASSIOPE","launch_year":2013,"__typename":"Launch"},{"flight_number":12,"mission_name":"SES-8","launch_year":2013,"__typename":"Launch"},{"flight_number":13,"mission_name":"Thaicom 6","launch_year":2014,"__typename":"Launch"},{"flight_number":14,"mission_name":"CRS-3","launch_year":2014,"__typename":"Launch"},{"flight_number":15,"mission_name":"OG-2 Mission 1","launch_year":2014,"__typename":"Launch"},{"flight_number":16,"mission_name":"AsiaSat 8","launch_year":2014,"__typename":"Launch"},{"flight_number":17,"mission_name":"AsiaSat 6","launch_year":2014,"__typename":"Launch"},{"flight_number":18,"mission_name":"CRS-4","launch_year":2014,"__typename":"Launch"},{"flight_number":19,"mission_name":"CRS-5","launch_year":2015,"__typename":"Launch"},{"flight_number":20,"mission_name":"DSCOVR","launch_year":2015,"__typename":"Launch"},{"flight_number":21,"mission_name":"ABS-3A / Eutelsat 115W B","launch_year":2015,"__typename":"Launch"},{"flight_number":22,"mission_name":"CRS-6","launch_year":2015,"__typename":"Launch"},{"flight_number":23,"mission_name":"TürkmenÄlem 52°E / MonacoSAT","launch_year":2015,"__typename":"Launch"},{"flight_number":24,"mission_name":"CRS-7","launch_year":2015,"__typename":"Launch"},{"flight_number":25,"mission_name":"OG-2 Mission 2","launch_year":2015,"__typename":"Launch"},{"flight_number":26,"mission_name":"Jason 3","launch_year":2016,"__typename":"Launch"},{"flight_number":27,"mission_name":"SES-9","launch_year":2016,"__typename":"Launch"},{"flight_number":28,"mission_name":"CRS-8","launch_year":2016,"__typename":"Launch"},{"flight_number":29,"mission_name":"JCSAT-2B","launch_year":2016,"__typename":"Launch"},{"flight_number":30,"mission_name":"Thaicom 8","launch_year":2016,"__typename":"Launch"},{"flight_number":31,"mission_name":"ABS-2A / Eutelsat 117W B","launch_year":2016,"__typename":"Launch"},{"flight_number":32,"mission_name":"CRS-9","launch_year":2016,"__typename":"Launch"},{"flight_number":33,"mission_name":"JCSAT-16","launch_year":2016,"__typename":"Launch"},{"flight_number":34,"mission_name":"Amos-6","launch_year":2016,"__typename":"Launch"},{"flight_number":35,"mission_name":"Iridium NEXT Mission 1","launch_year":2017,"__typename":"Launch"},{"flight_number":36,"mission_name":"CRS-10","launch_year":2017,"__typename":"Launch"},{"flight_number":37,"mission_name":"EchoStar 23","launch_year":2017,"__typename":"Launch"},{"flight_number":38,"mission_name":"SES-10","launch_year":2017,"__typename":"Launch"},{"flight_number":39,"mission_name":"NROL-76","launch_year":2017,"__typename":"Launch"},{"flight_number":40,"mission_name":"Inmarsat-5 F4","launch_year":2017,"__typename":"Launch"},{"flight_number":41,"mission_name":"CRS-11","launch_year":2017,"__typename":"Launch"},{"flight_number":42,"mission_name":"BulgariaSat-1","launch_year":2017,"__typename":"Launch"},{"flight_number":43,"mission_name":"Iridium NEXT Mission 2","launch_year":2017,"__typename":"Launch"},{"flight_number":44,"mission_name":"Intelsat 35e","launch_year":2017,"__typename":"Launch"},{"flight_number":45,"mission_name":"CRS-12","launch_year":2017,"__typename":"Launch"},{"flight_number":46,"mission_name":"FormoSat-5","launch_year":2017,"__typename":"Launch"},{"flight_number":47,"mission_name":"Boeing X-37B OTV-5","launch_year":2017,"__typename":"Launch"},{"flight_number":48,"mission_name":"Iridium NEXT Mission 3","launch_year":2017,"__typename":"Launch"},{"flight_number":49,"mission_name":"SES-11 / Echostar 105","launch_year":2017,"__typename":"Launch"},{"flight_number":50,"mission_name":"KoreaSat 5A","launch_year":2017,"__typename":"Launch"},{"flight_number":51,"mission_name":"CRS-13","launch_year":2017,"__typename":"Launch"},{"flight_number":52,"mission_name":"Iridium NEXT Mission 4","launch_year":2017,"__typename":"Launch"},{"flight_number":53,"mission_name":"ZUMA","launch_year":2018,"__typename":"Launch"},{"flight_number":54,"mission_name":"SES-16 / GovSat-1","launch_year":2018,"__typename":"Launch"},{"flight_number":55,"mission_name":"Falcon Heavy Test Flight","launch_year":2018,"__typename":"Launch"},{"flight_number":56,"mission_name":"Paz / Starlink Demo","launch_year":2018,"__typename":"Launch"},{"flight_number":57,"mission_name":"Hispasat 30W-6","launch_year":2018,"__typename":"Launch"},{"flight_number":58,"mission_name":"Iridium NEXT Mission 5","launch_year":2018,"__typename":"Launch"},{"flight_number":59,"mission_name":"CRS-14","launch_year":2018,"__typename":"Launch"},{"flight_number":60,"mission_name":"TESS","launch_year":2018,"__typename":"Launch"},{"flight_number":61,"mission_name":"Bangabandhu-1","launch_year":2018,"__typename":"Launch"},{"flight_number":62,"mission_name":"Iridium NEXT Mission 6","launch_year":2018,"__typename":"Launch"},{"flight_number":63,"mission_name":"SES-12","launch_year":2018,"__typename":"Launch"},{"flight_number":64,"mission_name":"CRS-15","launch_year":2018,"__typename":"Launch"},{"flight_number":65,"mission_name":"Telstar 19V","launch_year":2018,"__typename":"Launch"},{"flight_number":66,"mission_name":"Iridium NEXT Mission 7","launch_year":2018,"__typename":"Launch"},{"flight_number":67,"mission_name":"Merah Putih","launch_year":2018,"__typename":"Launch"},{"flight_number":68,"mission_name":"Telstar 18V","launch_year":2018,"__typename":"Launch"},{"flight_number":69,"mission_name":"SAOCOM 1A","launch_year":2018,"__typename":"Launch"},{"flight_number":70,"mission_name":"Es’hail 2","launch_year":2018,"__typename":"Launch"},{"flight_number":71,"mission_name":"SSO-A","launch_year":2018,"__typename":"Launch"},{"flight_number":72,"mission_name":"CRS-16","launch_year":2018,"__typename":"Launch"},{"flight_number":73,"mission_name":"GPS III SV01","launch_year":2018,"__typename":"Launch"},{"flight_number":74,"mission_name":"Iridium NEXT Mission 8","launch_year":2019,"__typename":"Launch"},{"flight_number":75,"mission_name":"Nusantara Satu (PSN-6) / S5 / Beresheet","launch_year":2019,"__typename":"Launch"},{"flight_number":76,"mission_name":"CCtCap Demo Mission 1","launch_year":2019,"__typename":"Launch"},{"flight_number":77,"mission_name":"ArabSat 6A","launch_year":2019,"__typename":"Launch"},{"flight_number":78,"mission_name":"CRS-17","launch_year":2019,"__typename":"Launch"},{"flight_number":79,"mission_name":"Starlink 1 (v0.9)","launch_year":2019,"__typename":"Launch"},{"flight_number":80,"mission_name":"RADARSAT Constellation","launch_year":2019,"__typename":"Launch"},{"flight_number":81,"mission_name":"STP-2","launch_year":2019,"__typename":"Launch"},{"flight_number":82,"mission_name":"CRS-18","launch_year":2019,"__typename":"Launch"},{"flight_number":83,"mission_name":"Amos-17","launch_year":2019,"__typename":"Launch"},{"flight_number":84,"mission_name":"JCSat 18 / Kacific 1","launch_year":2019,"__typename":"Launch"},{"flight_number":85,"mission_name":"CRS-19","launch_year":2019,"__typename":"Launch"},{"flight_number":86,"mission_name":"GPS III SV03 (Columbus)","launch_year":2019,"__typename":"Launch"},{"flight_number":87,"mission_name":"ALINA","launch_year":2019,"__typename":"Launch"},{"flight_number":88,"mission_name":"GTO-2","launch_year":2019,"__typename":"Launch"},{"flight_number":89,"mission_name":"SXM-7","launch_year":2019,"__typename":"Launch"},{"flight_number":90,"mission_name":"Starlink 2","launch_year":2019,"__typename":"Launch"},{"flight_number":91,"mission_name":"Starlink 3","launch_year":2019,"__typename":"Launch"},{"flight_number":92,"mission_name":"Crew Dragon In Flight Abort Test","launch_year":2019,"__typename":"Launch"},{"flight_number":94,"mission_name":"CRS-20","launch_year":2020,"__typename":"Launch"},{"flight_number":95,"mission_name":"CCtCap Demo Mission 2","launch_year":2020,"__typename":"Launch"},{"flight_number":96,"mission_name":"SAOCOM 1B","launch_year":2020,"__typename":"Launch"},{"flight_number":97,"mission_name":"GPS III SV04","launch_year":2020,"__typename":"Launch"},{"flight_number":98,"mission_name":"Turksat 5A","launch_year":2020,"__typename":"Launch"},{"flight_number":99,"mission_name":"GTO-C","launch_year":2020,"__typename":"Launch"},{"flight_number":100,"mission_name":"SXM-8","launch_year":2020,"__typename":"Launch"},{"flight_number":101,"mission_name":"USCV-1 (NASA Crew Flight 1)","launch_year":2020,"__typename":"Launch"},{"flight_number":102,"mission_name":"CRS-21","launch_year":2020,"__typename":"Launch"},{"flight_number":103,"mission_name":"GPS SV05","launch_year":2020,"__typename":"Launch"}]}}

Trying to process that with this:

module GetLaunches = [%graphql
  {|
  query getLaunches{
    launches {
      flight_number
      mission_name
      launch_year
    }
  }
|}
];

let str = ReasonReact.string;

module LaunchItem = {
  [@react.component]
  let make = (~launch) =>
  <div>



  </div>;
};

module GetLaunchesQuery = ReasonApollo.CreateQuery(GetLaunches);

[@react.component]
let make = () =>
  <GetLaunchesQuery>
    ...{
         ({result}) =>
           switch (result) {
           | Loading => <div> {ReasonReact.string("Loading")} </div>
           | Error(error) =>
             <div> {ReasonReact.string(error##message)} </div>
           | Data(response) =>
           (
            React.array(Array.of_list(
               List.map((launch) => <LaunchItem launch/>, response##launches)
        ))
        )

           }
       }
  </GetLaunchesQuery>;

Keep getting this error:

This has type:
    option(Js.Array.t(option({. "flight_number": option(int),
                               "launch_year": option(int),
                               "mission_name": option(string)})))
  But somewhere wanted:
    list('a)

#2

You asked in Stack Overflow as well, right? As Glenn mentioned over there, you need to handle the response type including options etc. In the case of Data(response), response##launches has type option(array(option(...))) (as the error message says). You will need to handle that exact data type. I would do something like:

| Data(response) =>
  response##launches
  |> Js.Option.getWithDefault([||])
  |> Array.map(fun
    | Some(launch) => <LaunchItem launch />
    | None => React.null)