Merge pull request #59 from jfrolich/api-change-retry

Proposed API change corrections

README.md

@@ -8,7 +8,7 @@ Reason bindings for the official @apollo/react-hooks
 yarn add reason-apollo-hooks reason-apollo @apollo/react-hooks
 ```
 
-Follow the installation instructions of [graphql_ppx](https://github.com/mhallin/graphql_ppx).
+Follow the installation instructions of [graphql_ppx_re](https://github.com/baransu/graphql_ppx_re).
 
 Then update your bsconfig.json
 
@@ -36,9 +36,9 @@ let client =
   ReasonApollo.createApolloClient(~link=httpLink, ~cache=inMemoryCache, ());
 
 let app =
- <ReasonApolloHooks.ApolloProvider client>
+ <ApolloHooks.Provider client>
    ...
- </ReasonApolloHooks.ApolloProvider>
+ </ApolloHooks.Provider>
 ```
 
 ### Usage with reason-apollo
@@ -50,9 +50,9 @@ let client = ... // create Apollo client
 
 ReactDOMRe.renderToElementWithId(
   <ReasonApollo.Provider client>
-    <ReasonApolloHooks.ApolloProvider client>
+    <ApolloHooks.Provider client>
       <App />
-    </ReasonApolloHooks.ApolloProvider>
+    </ApolloHooks.Provider>
   </ReasonApollo.Provider>,
   "root",
 );
@@ -63,20 +63,20 @@ ReactDOMRe.renderToElementWithId(
 ## useQuery
 
 ```reason
-module UserQueryConfig = [%graphql {|
+open ApolloHooks
+
+module UserQuery = [%graphql {|
   query UserQuery {
     currentUser {
       name
     }
   }
 |}];
 
-module UserQuery = ReasonApolloHooks.Query.Make(UserQueryConfig);
-
 [@react.component]
 let make = () => {
   /* Both variant and records available */
-  let (simple, _full) = UserQuery.use();
+  let (simple, _full) = useQuery(UserQuery.definition);
 
   <div>
   {
@@ -98,7 +98,7 @@ Using the `full` record for more advanced cases
 [@react.component]
 let make = () => {
   /* Both variant and records available */
-  let (_simple, full) = UserQuery.use(());
+  let (_simple, full) = useQuery(UserQuery.definition);
 
   <div>
   {
@@ -117,51 +117,74 @@ let make = () => {
 Using `fetchPolicy` to change interactions with the `apollo` cache, see [apollo docs](https://www.apollographql.com/docs/react/api/react-apollo/#optionsfetchpolicy).
 
 ```reason
-let (_simple, full) = UserQuery.use(~fetchPolicy=NetworkOnly, ());
+let (_simple, full) = useQuery(~fetchPolicy=NetworkOnly, UserQuery.definition);
 ```
 
 Using `errorPolicy` to change how errors are handled, see [apollo docs](https://www.apollographql.com/docs/react/api/react-apollo/#optionserrorpolicy).
 
 ```reason
-let (simple, _full) = UserQuery.use(~errorPolicy=All, ());
+let (simple, _full) = useQuery(~errorPolicy=All, UserQuery.definition);
 ```
 
 Using `skip` to skip query entirely, see [apollo docs](https://www.apollographql.com/docs/react/api/react-apollo/#configskip).
 
 ```reason
 let (simple, _full) =
-  UserQuery.use(
+  useQuery(
     ~skip=
-      switch (val) {
+      switch (value) {
       | None => true
       | _ => false
       },
-    (),
+    UserQuery.definition,
   );
 ```
 
 ## useMutation
 
 ```reason
-module ScreamMutationConfig = [%graphql {|
+module ScreamMutation = [%graphql {|
   mutation ScreamMutation($screamLevel: Int!) {
     scream(level: $screamLevel) {
       error
     }
   }
 |}];
 
-module ScreamMutation = ReasonApolloHooks.Mutation.Make(ScreamMutationConfig);
+[@react.component]
+let make = () => {
+  /* Both variant and records available */
+  let ( screamMutation, _simple, _full ) = useMutation(~variables=ScreamMutation.makeVariables(~screamLevel=10, ()), ScreamMutation.definition);
+  let scream = (_) => {
+    screamMutation()
+      |> Js.Promise.then_(result => {
+          switch(result) {
+            | Data(data) => ...
+            | Error(error) => ...
+            | NoData => ...
+          }
+          Js.Promise.resolve()
+        })
+      |> ignore
+  }
 
+  <div>
+    <button onClick={scream}>
+      {React.string("You kids get off my lawn!")}
+    </button>
+  </div>
+}
+```
+
+If you don't know the value of the variables yet you can pass them in later
+
+```reason
 [@react.component]
 let make = () => {
   /* Both variant and records available */
-  let ( screamMutation, _simple, _full ) = ScreamMutation.use();
+  let ( screamMutation, _simple, _full ) = useMutation(ScreamMutation.definition);
   let scream = (_) => {
-    screamMutation(
-      ~variables=ScreamMutationConfig.make(~screamLevel=10, ())##variables,
-      ()
-    )
+    screamMutation(~variables=ScreamMutation.makeVariables(~screamLevel=10, ()), ())
       |> Js.Promise.then_(result => {
           switch(result) {
             | Data(data) => ...
@@ -194,7 +217,7 @@ There are a couple of caveats with manual cache updates.
 An example of cache update could look like this:
 
 ```reason
-module PersonsQueryConfig = [%graphql
+module PersonsQuery = [%graphql
 {|
   query getAllPersons  {
     allPersons  {
@@ -206,16 +229,14 @@ module PersonsQueryConfig = [%graphql
 |}
 ];
 
-module PersonsQuery = ReasonApolloHooks.Query.Make(PersonsQueryConfig);
-
-module PersonsReadQuery = ApolloClient.ReadQuery(PersonsQueryConfig);
-module PersonsWriteQuery = ApolloClient.WriteQuery(PersonsQueryConfig);
+module PersonsReadQuery = ApolloClient.ReadQuery(PersonsQuery);
+module PersonsWriteQuery = ApolloClient.WriteQuery(PersonsQuery);
 
-external cast: Js.Json.t => PersonsQueryConfig.t = "%identity";
+external cast: Js.Json.t => PersonsQuery.t = "%identity";
 
 let updatePersons = (~client, ~name, ~age) => {
-  let query = PersonsQueryConfig.make();
-  let readQueryOptions = ReasonApolloHooks.Utils.toReadQueryOptions(query);
+  let query = PersonsQuery.make();
+  let readQueryOptions = ApolloHooks.Utils.toReadQueryOptions(query);
 
   // can throw exception of cache is empty
   switch (PersonsReadQuery.readQuery(client, readQueryOptions)) {

bsconfig.json

@@ -20,7 +20,6 @@
     }
   ],
   "suffix": ".bs.js",
-  "namespace": true,
   "bs-dependencies": ["reason-react", "reason-apollo"],
   "refmt": 3
 }

examples/persons/bsconfig.json

@@ -15,7 +15,7 @@
   ],
   "suffix": ".bs.js",
   "namespace": true,
-  "ppx-flags": ["graphql_ppx/ppx"],
+  "ppx-flags": ["@baransu/graphql_ppx_re/ppx"],
   "bs-dependencies": ["reason-react", "reason-apollo", "reason-apollo-hooks"],
   "refmt": 3
 }

examples/persons/package.json

@@ -2,8 +2,8 @@
   "name": "persons",
   "version": "0.1.0",
   "scripts": {
-    "build": "bsb -make-world",
-    "start": "bsb -make-world -w",
+    "build": "bsb -clean-world -make-world",
+    "start": "bsb -clean-world -make-world -w",
     "clean": "bsb -clean-world",
     "test": "echo \"Error: no test specified\" && exit 1",
     "webpack": "webpack -w",
@@ -19,17 +19,17 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@apollo/react-hooks": "^3.0.0",
-    "react": "^16.8.1",
-    "react-dom": "^16.8.1",
+    "@apollo/react-hooks": "^3.1.1",
+    "react": "^16.10.1",
+    "react-dom": "^16.10.1",
     "reason-apollo": "^0.17.0",
     "reason-apollo-hooks": "../../",
     "reason-react": ">=0.7.0"
   },
   "devDependencies": {
-    "bs-platform": "^5.0.6",
+    "bs-platform": "^5.2.0",
     "css-loader": "^3.2.0",
-    "graphql_ppx": "^0.2.8",
+    "@baransu/graphql_ppx_re": "^0.4.0",
     "html-webpack-plugin": "^3.2.0",
     "style-loader": "^1.0.0",
     "webpack": "^4.0.1",

examples/persons/src/EditPerson.re

@@ -1,6 +1,5 @@
-open ReasonApolloHooks;
-
-module EditPersonConfig = [%graphql
+open ApolloHooks;
+module EditPersonMutation = [%graphql
   {|
     mutation updatePerson($id: ID!, $age: Int!, $name: String!) {
       updatePerson(id: $id, age: $age, name: $name) {
@@ -12,8 +11,6 @@ module EditPersonConfig = [%graphql
   |}
 ];
 
-module EditPersonMutation = Mutation.Make(EditPersonConfig);
-
 type state = {
   id: string,
   age: option(int),
@@ -42,26 +39,25 @@ let make = () => {
     React.useReducer(reducer, {age: None, name: "", id: ""});
 
   let (editPersonMutation, _simple, _full) =
-    EditPersonMutation.use(
+    useMutation(
       ~refetchQueries=
         _ => {
           let query =
-            FilterByAge.PersonsOlderThanConfig.make(~age=filterAgeLimit, ());
-          [|ReasonApolloHooks.Utils.toQueryObj(query)|];
+            FilterByAge.PersonsOlderThanQuery.make(~age=filterAgeLimit, ());
+          [|toQueryObj(query)|];
         },
       ~update=
         (client, mutationResult) => {
           let data =
             mutationResult##data
             ->Belt.Option.flatMap(result => result##updatePerson);
-
           switch (data) {
           | Some(person) =>
             FilterByNameCache.updateCache(client, person, filterName)
           | None => ()
           };
         },
-      (),
+      EditPersonMutation.definition,
     );
 
   let handleSubmit = event => {
@@ -70,7 +66,12 @@ let make = () => {
     | Some(age) =>
       editPersonMutation(
         ~variables=
-          EditPersonConfig.make(~id=state.id, ~age, ~name=state.name, ())##variables,
+          EditPersonMutation.makeVariables(
+            ~age,
+            ~id=state.id,
+            ~name=state.name,
+            (),
+          ),
         (),
       )
       |> ignore
@@ -110,7 +111,7 @@ let make = () => {
         <div className="form-field">
           <input
             required=true
-            pattern="\d{1,3}"
+            pattern="\\d{1,3}"
             placeholder="Age"
             value={
               state.age

examples/persons/src/FilterByAge.re

@@ -1,4 +1,6 @@
-module PersonsOlderThanConfig = [%graphql
+open ApolloHooks;
+
+module PersonsOlderThanQuery = [%graphql
   {|
   query getPersonsOlderThan($age: Int!) {
     allPersons(filter: { age_gte: $age } ) {
@@ -8,20 +10,17 @@ module PersonsOlderThanConfig = [%graphql
 |}
 ];
 
-module PersonsOlderThanQuery =
-  ReasonApolloHooks.Query.Make(PersonsOlderThanConfig);
-
 [@react.component]
 let make = (~age) => {
-  let getPersonsOlderThan = PersonsOlderThanConfig.make(~age, ());
-
   let (simple, _full) =
-    PersonsOlderThanQuery.use(~variables=getPersonsOlderThan##variables, ());
+    useQuery(
+      ~variables=PersonsOlderThanQuery.makeVariables(~age, ()),
+      PersonsOlderThanQuery.definition,
+    );
 
   <div>
     {switch (simple) {
-     | ReasonApolloHooks.Query.Loading =>
-       <p> {React.string("Loading...")} </p>
+     | Loading => <p> {React.string("Loading...")} </p>
      | Data(data) =>
        <h3>
          {"There are "