Merge pull request #58 from Astrocoders/revert-49-api-change

Revert "Proposed API change"

README.md

@@ -36,9 +36,9 @@ let client =
   ReasonApollo.createApolloClient(~link=httpLink, ~cache=inMemoryCache, ());
 
 let app =
- <ApolloHooks.ApolloProvider client>
+ <ReasonApolloHooks.ApolloProvider client>
    ...
- </ApolloHooks.ApolloProvider>
+ </ReasonApolloHooks.ApolloProvider>
 ```
 
 ### Usage with reason-apollo
@@ -50,9 +50,9 @@ let client = ... // create Apollo client
 
 ReactDOMRe.renderToElementWithId(
   <ReasonApollo.Provider client>
-    <ApolloHooks.ApolloProvider client>
+    <ReasonApolloHooks.ApolloProvider client>
       <App />
-    </ApolloHooks.ApolloProvider>
+    </ReasonApolloHooks.ApolloProvider>
   </ReasonApollo.Provider>,
   "root",
 );
@@ -63,20 +63,20 @@ ReactDOMRe.renderToElementWithId(
 ## useQuery
 
 ```reason
-open ApolloHooks
-
-module UserQuery = [%graphql {|
+module UserQueryConfig = [%graphql {|
   query UserQuery {
     currentUser {
       name
     }
   }
 |}];
 
+module UserQuery = ReasonApolloHooks.Query.Make(UserQueryConfig);
+
 [@react.component]
 let make = () => {
   /* Both variant and records available */
-  let (simple, _full) = useQuery(~query=UserQuery.make(), ());
+  let (simple, _full) = UserQuery.use();
 
   <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) = useQuery(~query=UserQuery.make(), ());
+  let (_simple, full) = UserQuery.use(());
 
   <div>
   {
@@ -117,21 +117,20 @@ 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) = useQuery(~query=UserQuery.make(), ~fetchPolicy=NetworkOnly, ());
+let (_simple, full) = UserQuery.use(~fetchPolicy=NetworkOnly, ());
 ```
 
 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) = useQuery(~query=UserQuery.make(), ~errorPolicy=All, ());
+let (simple, _full) = UserQuery.use(~errorPolicy=All, ());
 ```
 
 Using `skip` to skip query entirely, see [apollo docs](https://www.apollographql.com/docs/react/api/react-apollo/#configskip).
 
 ```reason
 let (simple, _full) =
-  useQuery(
-    ~query=UserQuery.make(),
+  UserQuery.use(
     ~skip=
       switch (val) {
       | None => true
@@ -144,48 +143,25 @@ let (simple, _full) =
 ## useMutation
 
 ```reason
-module ScreamMutation = [%graphql {|
+module ScreamMutationConfig = [%graphql {|
   mutation ScreamMutation($screamLevel: Int!) {
     scream(level: $screamLevel) {
       error
     }
   }
 |}];
 
-[@react.component]
-let make = () => {
-  /* Both variant and records available */
-  let ( screamMutation, _simple, _full ) = useMutation(~mutation=ScreamMutation.make(~screamLevel=10, ()), ());
-  let scream = (_) => {
-    screamMutation()
-      |> Js.Promise.then_(result => {
-          switch(result) {
-            | Data(data) => ...
-            | Error(error) => ...
-            | NoData => ...
-          }
-          Js.Promise.resolve()
-        })
-      |> ignore
-  }
+module ScreamMutation = ReasonApolloHooks.Mutation.Make(ScreamMutationConfig);
 
-  <div>
-    <button onClick={scream}>
-      {React.string("You kids get off my lawn!")}
-    </button>
-  </div>
-}
-```
-
-If you don't know the value of the variables you can initialize with the query property
-
-```reason
 [@react.component]
 let make = () => {
   /* Both variant and records available */
-  let ( screamMutation, _simple, _full ) = useMutation(~incompleteMutation=ScreamMutation.query, ());
+  let ( screamMutation, _simple, _full ) = ScreamMutation.use();
   let scream = (_) => {
-    screamMutation(~mutation=ScreamMutation.make(~screamLevel=10, ()), ())
+    screamMutation(
+      ~variables=ScreamMutationConfig.make(~screamLevel=10, ())##variables,
+      ()
+    )
       |> Js.Promise.then_(result => {
           switch(result) {
             | Data(data) => ...
@@ -218,7 +194,7 @@ There are a couple of caveats with manual cache updates.
 An example of cache update could look like this:
 
 ```reason
-module PersonsQuery = [%graphql
+module PersonsQueryConfig = [%graphql
 {|
   query getAllPersons  {
     allPersons  {
@@ -230,14 +206,16 @@ module PersonsQuery = [%graphql
 |}
 ];
 
-module PersonsReadQuery = ApolloClient.ReadQuery(PersonsQuery);
-module PersonsWriteQuery = ApolloClient.WriteQuery(PersonsQuery);
+module PersonsQuery = ReasonApolloHooks.Query.Make(PersonsQueryConfig);
+
+module PersonsReadQuery = ApolloClient.ReadQuery(PersonsQueryConfig);
+module PersonsWriteQuery = ApolloClient.WriteQuery(PersonsQueryConfig);
 
-external cast: Js.Json.t => PersonsQuery.t = "%identity";
+external cast: Js.Json.t => PersonsQueryConfig.t = "%identity";
 
 let updatePersons = (~client, ~name, ~age) => {
-  let query = PersonsQuery.make();
-  let readQueryOptions = ApolloHooks.Utils.toReadQueryOptions(query);
+  let query = PersonsQueryConfig.make();
+  let readQueryOptions = ReasonApolloHooks.Utils.toReadQueryOptions(query);
 
   // can throw exception of cache is empty
   switch (PersonsReadQuery.readQuery(client, readQueryOptions)) {

bsconfig.json

@@ -20,6 +20,7 @@
     }
   ],
   "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": ["@baransu/graphql_ppx_re/ppx"],
+  "ppx-flags": ["graphql_ppx/ppx"],
   "bs-dependencies": ["reason-react", "reason-apollo", "reason-apollo-hooks"],
   "refmt": 3
 }

examples/persons/package.json

@@ -19,17 +19,17 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@apollo/react-hooks": "^3.1.1",
-    "react": "^16.10.1",
-    "react-dom": "^16.10.1",
+    "@apollo/react-hooks": "^3.0.0",
+    "react": "^16.8.1",
+    "react-dom": "^16.8.1",
     "reason-apollo": "^0.17.0",
     "reason-apollo-hooks": "../../",
     "reason-react": ">=0.7.0"
   },
   "devDependencies": {
-    "bs-platform": "^5.2.0",
+    "bs-platform": "^5.0.6",
     "css-loader": "^3.2.0",
-    "@baransu/graphql_ppx_re": "^0.3.2",
+    "graphql_ppx": "^0.2.8",
     "html-webpack-plugin": "^3.2.0",
     "style-loader": "^1.0.0",
     "webpack": "^4.0.1",

examples/persons/src/EditPerson.re

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

examples/persons/src/FilterByAge.re

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

examples/persons/src/FilterByNameCache.re

@@ -8,7 +8,7 @@
  * to serialize the parsed data back to its initial format, queries that will be updated manually
  * in cache can't use any of those directive, unless you will take care of the serialization yourself.
  */
-module PersonsNameFilterQuery = [%graphql
+module PersonsNameFilterConfig = [%graphql
   {|
   query getPersonsWithName($name: String!) {
     allPersons(filter: { name: $name } ) {
@@ -20,7 +20,7 @@ module PersonsNameFilterQuery = [%graphql
 |}
 ];
 
-external cast: Js.Json.t => PersonsNameFilterQuery.t = "%identity";
+external cast: Js.Json.t => PersonsNameFilterConfig.t = "%identity";
 
 type person = {
   .
@@ -29,23 +29,26 @@ type person = {
   "name": string,
 };
 
+module PersonsNameFilterQuery =
+  ReasonApolloHooks.Query.Make(PersonsNameFilterConfig);
+
 /** example using cache */
 module PersonsNameFilterReadQuery =
-  ApolloClient.ReadQuery(PersonsNameFilterQuery);
+  ApolloClient.ReadQuery(PersonsNameFilterConfig);
 
 module PersonsNameFilterWriteQuery =
-  ApolloClient.WriteQuery(PersonsNameFilterQuery);
+  ApolloClient.WriteQuery(PersonsNameFilterConfig);
 
 let updateFiltered = (person: person, name, filteredPersons: array(person)) =>
   person##name === name
     ? filteredPersons->Belt.Array.concat([|person|])
     : filteredPersons->Belt.Array.keep(p => p##id !== person##id);
 
 let updateCache = (client, person, name) => {
-  let filterByNameQuery = PersonsNameFilterQuery.make(~name, ());
+  let filterByNameQuery = PersonsNameFilterConfig.make(~name, ());
 
   let readQueryOptions =
-    ApolloHooks.Utils.toReadQueryOptions(filterByNameQuery);
+    ReasonApolloHooks.Utils.toReadQueryOptions(filterByNameQuery);
 
   // By default, apollo adds field __typename to the query and will use it
   // to normalize data. Parsing the result with Config.parse will remove the field,
@@ -77,12 +80,15 @@ let updateCache = (client, person, name) => {
 
 [@react.component]
 let make = (~name) => {
+  let getPersonsWithName = PersonsNameFilterConfig.make(~name, ());
+
   let (simple, _full) =
-    ApolloHooks.useQuery(~query=PersonsNameFilterQuery.make(~name, ()), ());
+    PersonsNameFilterQuery.use(~variables=getPersonsWithName##variables, ());
 
   <div>
     {switch (simple) {
-     | ApolloHooks.Query.Loading => <p> {React.string("Loading...")} </p>
+     | ReasonApolloHooks.Query.Loading =>
+       <p> {React.string("Loading...")} </p>
      | Data(data) =>
        <h3>
          {"There are "
@@ -95,4 +101,4 @@ let make = (~name) => {
      | Error(_) => <p> {React.string("Error")} </p>
      }}
   </div>;
-};
+};