Upgrade hooks api to use graphql-ppx 1.0

examples/2-query/bsconfig.json

@@ -3,7 +3,9 @@
   "reason": {
     "react-jsx": 3
   },
-  "bsc-flags": ["-bs-super-errors"],
+  "bsc-flags": [
+    "-bs-super-errors"
+  ],
   "sources": [
     {
       "dir": "src",
@@ -17,10 +19,17 @@
     }
   ],
   "suffix": ".bs.js",
-  "bs-dependencies": ["reason-urql", "wonka", "reason-react"],
+  "bs-dependencies": [
+    "reason-urql",
+    "wonka",
+    "reason-react",
+    "@reasonml-community/graphql-ppx"
+  ],
   "refmt": 3,
   "warnings": {
     "error": "+5"
   },
-  "ppx-flags": ["@baransu/graphql_ppx_re/ppx"]
-}
+  "ppx-flags": [
+    "@reasonml-community/graphql-ppx/ppx"
+  ]
+}

examples/2-query/package.json

@@ -15,15 +15,15 @@
     "@reasonml-community/graphql-ppx": "^1.0.1",
     "graphql": "^15.4.0",
     "react": "^16.8.0",
+    "react-dom": "^16.8.0",
     "reason-react": "^0.7.0",
     "reason-urql": "link:../../",
     "urql": "~1.10.0"
   },
   "devDependencies": {
-    "@baransu/graphql_ppx_re": "^0.7.1",
     "bs-platform": "7.3.2",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.11.0"
   }
-}
+}

examples/2-query/public/index.css

@@ -1,7 +1,4 @@
 .dex-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   margin: auto;
 }
 
@@ -59,15 +56,14 @@
 }
 
 .sidebar-container {
-  position: absolute;
+  display: flex;
   inset: 0;
-  display: grid;
-  grid-template-columns: minmax(20rem, 20%) 1fr;
 }
 
 .sidebar {
   display: flex;
   flex-direction: column;
+  height: 100vh;
   background: #f25050;
   padding: 1rem;
   overflow: auto;

examples/2-query/src/Container.re

@@ -11,32 +11,35 @@ module GetAllPokemons = [%graphql
 |}
 ];
 
-let request = GetAllPokemons.make(~first=151, ());
-
-let flattenPokemon = pokemons =>
-  pokemons
-  |> Array.map(pokemon =>
-       switch (pokemon) {
-       | Some(pokemon) => Belt.Option.getWithDefault(pokemon##name, "")
-       | None => ""
-       }
-     );
+let flattenPokemon = pokemons => {
+  GetAllPokemons.(
+    pokemons->Belt.Array.map(pokemon =>
+      pokemon
+      ->Belt.Option.flatMap(p => p.name)
+      ->Belt.Option.getWithDefault("")
+    )
+  );
+};
 
 [@react.component]
 let make = () => {
   let (Hooks.{response}, _) =
-    Hooks.useQuery(~request, ~requestPolicy=`CacheFirst, ());
+    Hooks.useQuery(
+      ~query=(module GetAllPokemons),
+      ~requestPolicy=`CacheFirst,
+      {first: 151},
+    );
 
   switch (response) {
   | Fetching => <div> "Loading"->React.string </div>
   | Data(data) =>
-    switch (data##pokemons) {
+    switch (data.pokemons) {
     | Some(pokemon) => <PokemonList pokemon={pokemon->flattenPokemon} />
     | None => <div> "No Data"->React.string </div>
     }
   | PartialData(data, e) =>
     <div>
-      {switch (data##pokemons) {
+      {switch (data.pokemons) {
        | Some(pokemon) => <PokemonList pokemon={pokemon->flattenPokemon} />
        | None => <div> "No Data"->React.string </div>
        }}

examples/2-query/src/Pokemon.re

@@ -20,21 +20,21 @@ module GetPokemon = [%graphql
 
 [@react.component]
 let make = (~pokemon: string) => {
-  let request = GetPokemon.make(~name=pokemon, ());
-  let (Hooks.{response}, _) = Hooks.useQuery(~request, ());
+  let (Hooks.{response}, _) =
+    Hooks.useQuery(~query=(module GetPokemon), {name: pokemon});
 
   switch (response) {
   | Fetching => <div> "Loading"->React.string </div>
   | Data(data)
   | PartialData(data, _) =>
-    switch (data##pokemon) {
+    switch (data.pokemon) {
     | Some(pokemon) =>
       switch (
-        pokemon##image,
-        pokemon##classification,
-        pokemon##name,
-        pokemon##height,
-        pokemon##weight,
+        pokemon.image,
+        pokemon.classification,
+        pokemon.name,
+        pokemon.height,
+        pokemon.weight,
       ) {
       | (
           Some(image),
@@ -51,7 +51,7 @@ let make = (~pokemon: string) => {
             <div className="dex__text">
               <h1 className="dex__title"> name->React.string </h1>
               <h2 className="dex__subtitle"> classification->React.string </h2>
-              {switch (height##maximum, weight##maximum) {
+              {switch (height.maximum, weight.maximum) {
                | (Some(heightMax), Some(weightMax)) =>
                  <div className="dex__stats">
                    <p> {("Height: " ++ heightMax)->React.string} </p>