Graphql array response to ReasonReact

Question

Trying to figure working with data in reason. I have this graphql query returning data a logging it. Question is how do I access the data in the following component.

let component = ReasonReact.statelessComponent("Home");

let make = (_) => {
  ...component,
  render: (_self) =>
    <View>
      <Hello message="Hello from home component" />
      <FetchEpisodes>
        (
          (response) => {
            Js.log(response);
            /* let episodeItems =
               Array.of_list(
                 List.map(
                   (response) =>
                     <Episode
                       key=response##data##allEpisodes##id
                       episode=response##data##allEpisodes##episode
                     />,
                 )
               ); */
            <div> <h1> (ReasonReact.stringToElement("Episodes!")) </h1> </div>
            /* (ReasonReact.arrayToElement(episodeItems)) */
          }
        )
      </FetchEpisodes>
    </View>
};

This is the query response:

coming from JS i keep wanting to log allEpisodes with some like response.data...which doesn't work here, obviously

Gists to components: episode component, home.re component

If i uncomment and run, it produces the following error:

```

FAILED: src/pages/home.mlast
/usr/local/lib/node_modules/bs-platform/bin/bsc.exe -pp "/usr/local/lib/node_modules/bs-platform/bin/refmt3.exe --print binary" -ppx '/usr/local/lib/node_modules/bs-platform/bin/reactjs_jsx_ppx_2.exe'   -w -30-40+6+7+27+32..39+44+45+101 -nostdlib -I '/Users/shingdev/code/REASON/with-reason-apollo-master/node_modules/bs-platform/lib/ocaml' -bs-super-errors -no-alias-deps -color always -c -o src/pages/home.mlast -bs-syntax-only -bs-binary-ast -impl /Users/shingdev/code/REASON/with-reason-apollo-master/src/pages/home.re
File "/Users/shingdev/code/REASON/with-reason-apollo-master/src/pages/home.re", line 53, characters 17-18:
Error: 2806: <UNKNOWN SYNTAX ERROR>

  We've found a bug for you!
  /Users/shingdev/code/REASON/with-reason-apollo-master/src/pages/home.re

  There's been an error running Reason's refmt parser on a file.
  This was the command:

  /usr/local/lib/node_modules/bs-platform/bin/refmt3.exe --print binary '/Users/shingdev/code/REASON/with-reason-apollo-master/src/pages/home.re' > /var/folders/qx/xhwh5zfj7z36_bjh5187svx00000gn/T/ocamlpp530e68

```

I'm not understanding how to process the response object when an array is returned. Thank you.

UPDATE per @glennsl's suggestion:

```
let make = (_) => {
  ...component,
  render: (_self) =>
    <View>
      <Hello message="Hello from home component" />
      /* <Greeting name="Tony" /> */
      <FetchEpisodes>
        (
          (response) => {
            let episodeItems =
              response##data##allEpisodes
              |> Array.map((episode) => <Episode key=episode##id title=episode##title />);
            <div> <h1> (ReasonReact.stringToElement("Episodes!")) </h1> </div>(
              ReasonReact.arrayToElement(episodeItems)
            )
          }
        )
      </FetchEpisodes>
    </View>
};
```

This produces the following error:

I'm figuring its coming because the types arent being passed to episode.re

```
let component = ReasonReact.statelessComponent("Episode");

let make = (~style=?, ~episode, _children) => {
  ...component,
  render: (_self) => <View ?style> <h1> (ReasonReact.stringToElement(episode)) </h1> </View>
};
```

Am I supposed to pass list(episode) somewhere?

UPDATE 2: This code works as far as JSX thanks to @glennsl

```

let make = (_) => {
  ...component,
  render: (_self) =>
    <View>
      <Hello message="Hello from home component" />
      /* <Greeting name="Tony" /> */
      <FetchEpisodes>
        (
          (response) => {
            let episodeItems =
              response##data##allEpisodes
              |> Array.map((episode) => <Episode key=episode##id episode=episode##episode />);
            <div>
              <h1> (ReasonReact.stringToElement("Episodes!")) </h1>
              (ReasonReact.arrayToElement(episodeItems))
            </div>
          }
        )
      </FetchEpisodes>
    </View>
};
```

It's not at all obvious to me why this obviously doesn't work. Do you get an error, or does it just not work as expected? — glennsl, Nov 10 '17 at 14:34
@glennsl Obviously, meaning something is wrong hence, Im asking a question. My bad. I updated with the error it produces. Thanks for taking a look. — armand, Nov 10 '17 at 14:51
Ok, I thought you had problems even just logging the response. The syntax error is just because there's a dangling `,` in `List.map`, but you're also missing the second argument and have plenty of type errors in there too. Let me cook up a suggestion in an answer for you. — glennsl, Nov 10 '17 at 15:16

glennsl · Accepted Answer · 2017-11-10T18:45:11.277

1

This should work, I think:

type episode = {. "id": string, "title": string, "episode": string};
type data = {. "allEpisodes": array(episode)};

...

(response) => {
  let episodeItems =
    response##data##allEpisodes
    |> Array.map((episode) =>
       <Episode key=episode##id
                episode=episode##episode />);

  <div>
    <h1> (ReasonReact.stringToElement("Episodes!")) </h1>
    (ReasonReact.arrayToElement(episodeItems))
  </div>
}

Let me know if it doesn't, or if any of this confuses you I'll happily explain.

Edit: You've also typed data##allEpisodes as list(episode) when it's actually array(episode). Updated the code block above. A list is not the same as an array, the former is a linked list type while the latter is equivalent to a JavaScript array.

Edit 2: Fixed JSX

edited Nov 10 '17 at 18:45

answered Nov 10 '17 at 15:26

glennsl

28,186
12
57
75

so if this is episode.re```let component = ReasonReact.statelessComponent("Episode"); let make = (~style=?, ~episode, _children) => { ...component, render: (_self) =>
(ReasonReact.stringToElement(episode))
};``` I would have to pass the title type to make, correct? – armand Nov 10 '17 at 15:59
Title type? If you want to print the title with that Episode component, you'd have to pass it the value of the title property: `` – glennsl Nov 10 '17 at 16:06
I'm still producing errors. This is the demo repo. https://github.com/idkjs/reason-arrays-demo. Also, what is this concept named so I can look it up in the docs? – armand Nov 10 '17 at 16:21
Seems to not like the way the data type is defined or I'm not telling it how to read it the correct way. Error: ```This is: (array(Js.t(({.. id : string, title : string } as 'a)))) => array(ReasonReact.reactElement) But somewhere wanted: (list(episode)) => 'b The incompatible parts: array(Js.t('a)) vs at ``` – armand Nov 10 '17 at 16:22
Ah, your data is incorrectly typed, see the edited answer. Also, which concept are you referring to? – glennsl Nov 10 '17 at 16:59
Ok. So. The following has some kind of formatting error I cant work out.``` ( (response) => { Js.log(response); let episodeItems = response##data##allEpisodes |> Array.map((episode) => );

(ReasonReact.stringToElement("Episodes!"))

( ReasonReact.arrayToElement(episodeItems) ) } ) ``` – armand Nov 10 '17 at 18:35
This is the error: Error: This expression has type ReasonReact.reactElement It seems to have been called like a function? Maybe you forgot at here? – armand Nov 10 '17 at 18:35
Hmm, yea that's a confusing error that means you're trying to return more than a single `reactElement`. I've updated the answer with the fixed JSX. – glennsl Nov 10 '17 at 18:46
Im thinking that the Episode.re module already returns a ReactElement and i should be able to call episodeItems directly as a return value. Does that make sense? – armand Nov 10 '17 at 19:00
1

You can return `ReasonReact.arrayToElement(episodeItems)` directly, yes. It might be a good idea to DM me on Discord if you have more follow-up questions. This comment thread's getting a bit long :) – glennsl Nov 10 '17 at 19:36
1

You should also keep SO questions to a single specific problem, and not update them when you encounter new problems. SO intends to be a knowledge base, not a general debugging/problem-fixing service. Discord is a better forum for that kind of assistance. – glennsl Nov 10 '17 at 19:41

drejohnson · Answer 2 · 2017-11-10T19:03:22.210

0

response##data##allEpisodes
|> Array.map((episode) =>

This won't work because response##data##allEpisodes returns undefined. I believe it's because in [reason-apollo]: https://github.com/Gregoirevda/reason-apollo/blob/master/src/ReasonApollo.re#L29 data is typed as a string.

edited Nov 10 '17 at 19:03

answered Nov 10 '17 at 18:52

drejohnson

69
2
9

Sorry for adding an answer. I don't have enough points to comment. – drejohnson Nov 10 '17 at 19:05
Got the same errror. Strange because previously, before had jsx fixed, it was coming back and logging to console. Now it just doesn't wait for it. How does one handle async in reason? – armand Nov 10 '17 at 19:22

Graphql array response to ReasonReact

2 Answers2

(ReasonReact.stringToElement(episode))

(ReasonReact.stringToElement("Episodes!"))