https://github.com/lessp/revery-graphql-hooks

A library for easy handling of GraphQL with hooks for Revery
https://github.com/lessp/revery-graphql-hooks

graphql hooks revery

Last synced: about 2 months ago
JSON representation

A library for easy handling of GraphQL with hooks for Revery

• Host: GitHub
• URL: https://github.com/lessp/revery-graphql-hooks
• Owner: lessp
• License: mit
• Created: 2019-10-26T20:02:05.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-08-19T13:58:11.000Z (about 4 years ago)
• Last Synced: 2024-05-27T21:49:29.911Z (4 months ago)
• Topics: graphql, hooks, revery
• Language: Reason
• Homepage:
• Size: 529 KB
• Stars: 32
• Watchers: 6
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - revery-graphql-hooks

README

        
# Revery GraphQL Hooks

[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)

A library for easy handling of GraphQL within Revery using [graphql_ppx](https://github.com/reasonml-community/graphql_ppx).

## Table of Contents

1. [Getting started](#getting-started)

2. [Syntax](#syntax)

3. [Todo](#todo)

4. [Contributing](#contributing)

5. [License](#license)

## Getting started

### Installing

In your `package.json/esy.json` add:

```json

"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](example.json) except for `revery-graphql-hooks`.

then in your `dune`-file:

```lisp

(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`)

```ocaml

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`.

```ocaml

let _startEventLoop = Revery_Lwt.startEventLoop();

```

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

## Syntax

### Query

```ocaml

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"

  };

  ;

};

```

### Mutation

```ocaml

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"

    };

  

    

        addGreeting(

          ~variables=AddGreeting.makeVariables(~greeting="Cheers", ()),

          (),

        )

      }

      title="Click to add"

    />

    

  ;

};

```

## ToDo

- [x] Propagate updates to hooks with the same queries

- [x] 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/](examples/), the library itself is located in [src/](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](./LICENSE) file for details

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
Tom Ekander
🤔 💻 📖

    
Margarita Krutikova
🤔

    
Danny Martini
🤔 💻

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!