Revery GraphQL Hooks

A library for easy handling of GraphQL within Revery using graphql_ppx.

Table of Contents

1. Getting started
2. Syntax
3. Todo
4. Contributing
5. License

Getting started

Installing

In your package.json/esy.json add:

"dependencies": {
  ...
  "graphql_ppx": "reasonml-community/graphql_ppx:esy.json",
  "revery": "revery-ui/revery",
  "revery-graphql-hooks": "lessp/revery-graphql-hooks",
}

You will also need to copy anu resolutions in example.json except for revery-graphql-hooks.

then in your dune-file:

(preprocess
  (pps
    graphql_ppx ;; + any other preprocessors (e.g. brisk-reconciler.ppx) for Revery
  ))
(libraries
  ;; any other libraries
  Revery Revery.lwt revery-graphql-hooks)

Setup

Create a file, lets name it Graphql.re for easy access.

In this file we'll specify some settings for our HTTP-calls.

(If you'd like to try out the example below, you can use: https://hello-graphql-api.lessp.now.sh/api)

module Config = {
  let baseUrl = "https://your_graphql_api_endpoint.com/";
  let headers = [];
};

include ReveryGraphqlHooks.Make(Config);

NOTE: For Revery to handle Promises we need to start the event loop. Add the following line, prior to calling UI.start.

let _startEventLoop = Revery_Lwt.startEventLoop();

That's all, we can now make some queries!

Syntax

Query

module HelloQueryConfig = [%graphql
  {|
    query Hello {
      hello {
        name
      }
    }
  |}
];

let%component make = () => {
  let%hook status = Graphql.useQuery(HelloQueryConfig.definition, ());

  let text = switch (status) {
  | Idle => "Idle"
  | Data(query) => query#hello#name
  | Loading => "Loading..."
  | Error => "Error"
  };

  <Text text />;
};

Mutation

module AddGreetingConfig = [%graphql
  {|
    mutation AddGreeting($greeting: String!) {
      addGreeting(greeting: $greeting)
    }
  |}
];

let%component make = () => {
  let%hook (addGreetingMutation, status) =
    Graphql.useMutation(AddGreetingConfig.definition, ());

  let text =
    switch (status) {
    | Idle => "Idle"
    | Data(query) => query#addGreeting
    | Loading => "Loading..."
    | Error => "Error"
    };

  <Center>
    <Button
      onClick={_ =>
        addGreeting(
          ~variables=AddGreeting.makeVariables(~greeting="Cheers", ()),
          (),
        )
      }
      title="Click to add"
    />
    <Text text />
  </Center>;
};

ToDo

• Propagate updates to hooks with the same queries
• Simplify API by using definition from graphql_ppx
• Cache

Contributing

Contributions are more than welcome! Start by cloning this repository. The runnable example is located in examples/, the library itself is located in src/.

# to build the library
esy

# to run the examples
esy '@example' start

License

This project is licensed under the MIT License - see the LICENSE file for details

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Tom Ekander 🤔 💻 📖

Margarita Krutikova 🤔

Danny Martini 🤔 💻

This project follows the all-contributors specification. Contributions of any kind welcome!