Reason-apollo

Easily use the Apollo Client 2 with Reason

Install and setup

yarn

yarn add reason-apollo

bsconfig

Add reason-apollo to your bs-dependencies: bsconfig.json

"bs-dependencies": [
  "reason-react",
  "reason-apollo"
]

Usage

here is a repository showing the usage of the package.

Create the Apollo Client

Apollo.re

module Client = ReasonApollo.Create({ let uri = "http://localhost:3010/graphql" });

Query

Query Configuration

QueryConfig.re

/* Create a query with the `graphql-tag` */

let query = [@bs] gql({|
  query getUser {
    name
  }
|});  

/* Describe the result type */
  type user = {. "name": string};
  type data = {. "user": user};
  type response = data;
  
/* Optional variables passed to the query */
  type variables = {. "limit": int}; /* or `type variables;` if none */

Executing the Query

YourQuery.re

module FetchUserName = Apollo.Client.Query(QueryConfig);

let variables = {
  "limit": 2
};

let make = (_children) => {
/* ... */
render: (_) =>
  <FetchUserName variables>
    (response => {
      switch response {
         | Loading => <div> (Utils.ste("Loading")) </div>
         | Failed(error) => <div> (Utils.ste(error)) </div>
         | Loaded(result) => <div> (Utils.ste(result##user##name)) </div>
    })
  </FetchUserName>
}

Mutation

Mutation Configuration

MutationConfig.re

/* Create a mutation with the `graphql-tag` */

let mutation = [@bs] gql({|
  mutation deleteTodo($id: ID!) {
      deleteTodo(id: $id) {
        id
        name
      }
    }
|});  

/* Describe the result type */
type todo = {. "name": string, "id": string};
type data = {. "deleteTodo": todo};
type response = data;
  
/* Optional variables passed to the mutation */
  type variables = {. "id": string}; /* or `type variables;` if none */

Executing the Mutation

YourMutation.re

module DeleteTodo = Apollo.Client.Mutation(MutationConfig);

let variables = {
  "id": "uuid-1"
};

let make = (_children) => {
/* ... */
render: (_) =>
  <DeleteTodo>
    ((
      deleteTodo /* Mutation to call */, 
      result /* Result of your mutation */
    ) => {
        let mutationResponse = switch result {
          | NotCalled => <div>  (Utils.ste("Not Called")) </div>
          | Loading => <div> (Utils.ste("Loading")) </div>
          | Loaded(response) => <div> (Utils.ste(response##deleteTodo##name ++ " deleted")) </div>
          | Failed(error) => <div> (Utils.ste(error)) </div>
        };
      <div>
        <button onClick=((_mouseEvent) => deleteTodo(~variables, ()))> 
          (Utils.ste("Delete Todo")) 
        </button>
        <div> (mutationResponse) </div>
      </div>
    })
  </DeleteTodo>
}