docs: move example API to Heroku

examples/persons/package.json

@@ -26,13 +26,13 @@
     "reason-react": ">=0.8.0"
   },
   "devDependencies": {
+    "@baransu/graphql_ppx_re": "^0.7.1",
     "bs-platform": "^7.3.2",
     "css-loader": "^3.2.0",
-    "@baransu/graphql_ppx_re": "^0.7.1",
     "html-webpack-plugin": "^3.2.0",
     "style-loader": "^1.0.0",
     "webpack": "^4.0.1",
     "webpack-cli": "^3.1.1",
-    "webpack-dev-server": "^3.1.8"
+    "webpack-dev-server": "^3.11.0"
   }
 }

examples/persons/src/AddPerson.re

@@ -3,10 +3,12 @@ open ApolloHooks;
 module EditPersonMutation = [%graphql
   {|
     mutation addPerson($age: Int!, $name: String!) {
-      createPerson(age: $age, name: $name) {
-        id
-        age
-        name
+      insert_persons(objects: { age: $age, name: $name }) {
+        returning {
+          id
+          age
+          name
+        }
       }
     }
   |}

examples/persons/src/Client.re

@@ -2,14 +2,14 @@ let inMemoryCache = ApolloInMemoryCache.createInMemoryCache();
 
 let httpLink =
   ApolloLinks.createHttpLink(
-    ~uri="https://api.graph.cool/simple/v1/cjdgba1jw4ggk0185ig4bhpsn",
+    ~uri="https://reason-apollo-hooks-example.herokuapp.com/v1/graphql",
     (),
   );
 
 /* WebSocket client */
 let webSocketLink =
   ApolloLinks.webSocketLink({
-    uri: "wss://subscriptions.graph.cool/v1/cjdgba1jw4ggk0185ig4bhpsn",
+    uri: "wss://reason-apollo-hooks-example.herokuapp.com/v1/graphql",
     options: {
       reconnect: true,
       connectionParams: None,

examples/persons/src/EditPerson.re

@@ -1,13 +1,15 @@
 open ApolloHooks;
 module EditPersonMutation = [%graphql
   {|
-    mutation updatePerson($id: ID!, $age: Int!, $name: String!) {
-      updatePerson(id: $id, age: $age, name: $name) {
+    mutation updatePerson($id: Int!, $age: Int!, $name: String!) {
+      update_persons(where: { id: { _eq: $id } }, _set: { age: $age, name: $name }) {
+        returning {
           id
           age
           name
         }
       }
+    }
   |}
 ];
 
@@ -19,15 +21,21 @@ module OptimisticResponse = {
    * serialisation function directly to the generated mutation. That should make this step unnecessary for most
    * usecases.
    */
+
   type t = {
     .
     "__typename": string,
-    "updatePerson": {
+    "update_persons": {
       .
       "__typename": string,
-      "age": int,
-      "id": string,
-      "name": string,
+      "returning":
+        Js.Array.t({
+          .
+          "__typename": string,
+          "age": int,
+          "id": int,
+          "name": string,
+        }),
     },
   };
 
@@ -36,24 +44,24 @@ module OptimisticResponse = {
   let make = (~id, ~name, ~age) =>
     {
       "__typename": "Mutation",
-      "updatePerson": {
-        "__typename": "Person",
-        "id": id,
-        "name": name,
-        "age": age,
+      "update_persons": {
+        "__typename": "persons_mutation_response",
+        "returning": [|
+          {"__typename": "Person", "id": id, "name": name, "age": age},
+        |],
       },
     }
     ->cast;
 };
 
 type state = {
-  id: string,
+  id: int,
   age: option(int),
   name: string,
 };
 
 type action =
-  | SetId(string)
+  | SetId(int)
   | SetAge(option(int))
   | SetName(string);
 
@@ -68,7 +76,7 @@ let reducer = (state, action) => {
 [@react.component]
 let make = (~refetchQueries, ~update) => {
   let (state, dispatch) =
-    React.useReducer(reducer, {age: None, name: "", id: ""});
+    React.useReducer(reducer, {age: None, name: "", id: 0});
 
   let (editPersonMutation, _simple, _full) =
     useMutation(
@@ -124,10 +132,10 @@ let make = (~refetchQueries, ~update) => {
       <input
         required=true
         placeholder="Id"
-        value={state.id}
+        value={state.id |> string_of_int}
         onChange={event => {
           let value = event->ReactEvent.Form.target##value;
-          dispatch(SetId(value));
+          dispatch(SetId(value |> int_of_string));
         }}
       />
     </div>

examples/persons/src/FilterByAge.re

@@ -3,7 +3,7 @@ open ApolloHooks;
 module PersonsOlderThanQuery = [%graphql
   {|
   query getPersonsOlderThan($age: Int!) {
-    allPersons(filter: { age_gte: $age } ) {
+    persons(where: { age: { _gt: $age } } ) {
       id
     }
   }
@@ -24,7 +24,7 @@ let make = (~age) => {
      | Data(data) =>
        <h3>
          {"There are "
-          ++ (data##allPersons->Belt.Array.length |> string_of_int)
+          ++ (data##persons->Belt.Array.length |> string_of_int)
           ++ " people older than "
           ++ string_of_int(age)
           |> React.string}

examples/persons/src/FilterByAgeErrorHandling.re

@@ -5,7 +5,7 @@ open ApolloHooks;
 module PersonsOlderThanQuery = [%graphql
   {|
   query getPersonsOlderThan($age: Int!) {
-    allPersons(filter: { age_gte: $age } ) {
+    persons(where: { age: { _gt: $age } } ) {
       id
     }
   }
@@ -27,7 +27,7 @@ let make = (~age) => {
      | Data(data) =>
        <h3>
          {"There are "
-          ++ (data##allPersons->Belt.Array.length |> string_of_int)
+          ++ (data##persons->Belt.Array.length |> string_of_int)
           ++ " people older than "
           ++ string_of_int(age)
           |> React.string}
@@ -36,4 +36,4 @@ let make = (~age) => {
      | Error(error) => <p> {React.string(error##message)} </p>
      }}
   </div>;
-};
+};

examples/persons/src/FilterByNameCache.re

@@ -13,7 +13,7 @@ open ApolloHooks;
 module PersonsNameFilterQuery = [%graphql
   {|
   query getPersonsWithName($name: String!) {
-    allPersons(filter: { name: $name } ) {
+    persons(where: { name: { _eq: $name } } ) {
       id
       name
       age
@@ -27,7 +27,7 @@ external cast: Js.Json.t => PersonsNameFilterQuery.t = "%identity";
 type person = {
   .
   "age": int,
-  "id": string,
+  "id": int,
   "name": string,
 };
 
@@ -69,7 +69,7 @@ let updateCache = (client, person, name) => {
       // (with the addition of __typename field) and can be cast to PersonsNameFilterConfig.t.
       let persons = cast(cachedPersons);
       let updatedPersons = {
-        "allPersons": updateFiltered(person, name, persons##allPersons),
+        "persons": updateFiltered(person, name, persons##persons),
       };
 
       PersonsNameFilterWriteQuery.make(
@@ -96,7 +96,7 @@ let make = (~name) => {
      | Data(data) =>
        <h3>
          {"There are "
-          ++ (data##allPersons->Belt.Array.length |> string_of_int)
+          ++ (data##persons->Belt.Array.length |> string_of_int)
           ++ " with name "
           ++ name
           |> React.string}

examples/persons/src/LoadMore.re

@@ -1,7 +1,7 @@
 module GetAllPersonsQuery = [%graphql
   {|
     query getAllPersons($skip: Int!, $first: Int!) {
-      allPersons(skip: $skip, first: $first) {
+      persons(offset: $skip, limit: $first) {
         id
         age
         name
@@ -25,7 +25,7 @@ let make = () => {
   let handleLoadMore = _ => {
     let skip =
       switch (full) {
-      | {data: Some(data)} => data##allPersons->Belt.Array.length
+      | {data: Some(data)} => data##persons->Belt.Array.length
       | _ => 0
       };
 
@@ -38,7 +38,7 @@ let make = () => {
             if (!fetchMoreResult) return prevResult;
             return {
                 ...fetchMoreResult,
-                allPersons: prevResult.allPersons.concat(fetchMoreResult.allPersons)
+                persons: prevResult.persons.concat(fetchMoreResult.persons)
               };
           }
         |}
@@ -53,7 +53,7 @@ let make = () => {
      | {loading: true, data: None} => <p> {React.string("Loading...")} </p>
      | {data: Some(data)} =>
        <>
-         <Persons persons={data##allPersons} />
+         <Persons persons={data##persons} />
          <button
            onClick=handleLoadMore disabled={full.networkStatus === FetchMore}>
            {React.string("Load more")}

examples/persons/src/Persons.re

@@ -2,10 +2,10 @@
 let make = (~persons) =>
   <div className="person-list">
     {persons->Belt.Array.map(person =>
-       <div key=person##id className="person">
+       <div key={person##id |> string_of_int} className="person">
          <div className="person-field">
            <span className="person-label"> {React.string("Id: ")} </span>
-           {React.string(person##id)}
+           {person##id |> string_of_int |> React.string}
          </div>
          <div className="person-field">
            <span className="person-label"> {React.string("Name: ")} </span>

examples/persons/src/Root.re

@@ -21,7 +21,10 @@ let make = () => {
   let editPersonUpdate = (client, mutationResult) => {
     let data =
       mutationResult##data
-      ->Belt.Option.flatMap(result => result##updatePerson);
+      ->Belt.Option.flatMap(result => result##update_persons)
+      ->Belt.Option.flatMap(update_persons =>
+          update_persons##returning->Belt.Array.get(0)
+        );
     switch (data) {
     | Some(person) =>
       FilterByNameCache.updateCache(client, person, filterName)
@@ -110,4 +113,4 @@ let make = () => {
        }}
     </div>
   </>;
-};
+};