Revery GraphQL Hooks
A library for easy handling of GraphQL within Revery using graphql_ppx.
Table of Contents
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
definitionfromgraphql_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!