I’ve got this graphql query that is returning and array of type:
{. "id": string, "isPublished": Js.boolean, "text": string, "title": string}
If I render it with this code, it works:
response##feed
|> Array.mapi((index, post) =>
<div key=(index |> string_of_int)>
(post##title |> ste)
</div>
)
|> ReasonReact.arrayToElement
But then if i build a component, <Post and pass post to it, the type changes.
// Post.re
let component = ReasonReact.statelessComponent("Post");
let make = (~post, _children) => {
...component,
render: _self => {
let title = ! post##isPublished ? post##title ++ "Draft" : post##title;
<div>
<Link className="no-underline ma1" href=("/detailpage/" ++ post##id)>
<h2 className="f3 black-80 fw4 lh-solid"> (title |> Aliases.ste) </h2>
/* (post##title |> Aliases.ste) */
<p className="black-80 fw3"> (post##text |> Aliases.ste) </p>
</Link>
</div>;
},
};
and try to return it with:
|> Array.mapi(
(index, post) =>
<Post post key=(index |> string_of_int) />
)
|> ReasonReact.arrayToElement
I get the following type error:
73 ┆ )
74 ┆ |> ReasonReact.arrayToElement */ 75 ┆ |> Array.mapi((index, post) =>
76 ┆ <Post post key=(index |> string_of_int) />
77 ┆ ) 78 ┆ |> ReasonReact.arrayToElement
79 ┆ }
This has type:
array(Js.t(({.. id: string, isPublished: bool, text: string,
title: string}
as 'a))) =>
array(ReasonReact.reactElement)
But somewhere wanted:
Js.Array.t({. "id": string, "isPublished": Js.boolean, "text": string,
"title": string}) =>
'b
The incompatible parts:
array(Js.t('a))
vs
Js.Array.t({. "id": string, "isPublished": Js.boolean, "text": string,
"title": string})
(defined as
array({. "id": string, "isPublished": Js.boolean, "text": string,
"title": string}))
at <anonymous> isPublished are incompatible
Why has the isPublished type changed from Js.boolean to bool in the <Post component? Am i not sending to <Post what was returned from the query?
Thanks for any guidance.