module type Config = {
  type t;

  let query: string;
  let parse: Js.Json.t => t;
};

module Provider = {
  [@bs.module "@apollo/react-hooks"] [@react.component]
  external make:
    (~client: ApolloClient.generatedApolloClient, ~children: React.element) =>
    React.element =
    "ApolloProvider";
};

module Query = {
  module Make = (Config: Config) => {
    [@bs.module] external gql: ReasonApolloTypes.gql = "graphql-tag";

    type error = {. "message": string};

    [@bs.deriving abstract]
    type options = {
      [@bs.optional]
      variables: Js.Json.t,
    };

    [@bs.module "@apollo/react-hooks"]
    external _useQuery:
      (ReasonApolloTypes.queryString, Js.Nullable.t(options)) =>
      {
        .
        "data": Js.Nullable.t(Js.Json.t),
        "loading": bool,
        "error": Js.Nullable.t(error),
      } =
      "useQuery";

    type resultVariant =
      | Data(Config.t)
      | Error(error)
      | Loading
      | NoData;

    type result = {
      data: option(Config.t),
      error: option(error),
      loading: bool,
    };

    let use = (~options=?, ()) => {
      let jsResult =
        _useQuery(gql(. Config.query), Js.Nullable.fromOption(options));

      let result = {
        data:
          jsResult##data->Js.Nullable.toOption->Belt.Option.map(Config.parse),
        loading: jsResult##loading,
        error: jsResult##error->Js.Nullable.toOption,
      };

      switch (result) {
      | {data: Some(data)} => Data(data)
      | {error: Some(error)} => Error(error)
      | {loading: true} => Loading
      | _ => NoData
      };
    };
  };
};