feat: updates the EXAMPLES project

illusionalsagacity · Feb 3, 2023 · 22759e5 · 22759e5
1 parent 1903304
commit 22759e5
Show file tree

Hide file tree

Showing 13 changed files with 143 additions and 78 deletions.
diff --git a/EXAMPLES/bsconfig.json b/EXAMPLES/bsconfig.json
@@ -16,6 +16,10 @@
     }
   ],
   "ppx-flags": ["@reasonml-community/graphql-ppx/ppx"],
+  "jsx": {
+    "version": 4,
+    "mode": "automatic"
+  },
   "reason": {
     "react-jsx": 3
   },

diff --git a/EXAMPLES/package.json b/EXAMPLES/package.json
@@ -4,29 +4,29 @@
   "description": "Examples for rescript-apollo-client",
   "private": true,
   "scripts": {
-    "clean": "bsb -clean-world",
+    "clean": "rescript clean",
     "graphql-server": "graphql-client-example-server",
     "server": "webpack-dev-server",
-    "start": "bsb -make-world -w"
+    "start": "rescript build -with-deps -w"
   },
   "devDependencies": {
-    "@reasonml-community/graphql-ppx": "1.2.2",
-    "bs-platform": "9.0.0",
-    "graphql-client-example-server": "1.2.0",
-    "html-webpack-plugin": "4.3.0",
-    "webpack": "4.43.0",
-    "webpack-cli": "3.3.12",
-    "webpack-dev-server": "3.11.0"
+    "@reasonml-community/graphql-ppx": "1.2.3",
+    "graphql-client-example-server": "1.5.2",
+    "html-webpack-plugin": "5.5.0",
+    "rescript": "10.1.2",
+    "webpack": "5.75.0",
+    "webpack-cli": "5.0.1",
+    "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "@apollo/client": "3.5.6",
-    "@rescript/react": "0.10.1",
-    "@ryyppy/rescript-promise": "0.0.2",
-    "graphql": "15.3.0",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "reason-promise": "1.1.1",
+    "@apollo/client": "3.7.6",
+    "@rescript/react": "0.11.0",
+    "@ryyppy/rescript-promise": "2.1.0",
+    "graphql": "^15.7.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "reason-promise": "1.1.5",
     "rescript-apollo-client": "3.1.0",
-    "subscriptions-transport-ws": "0.9.16"
+    "subscriptions-transport-ws": "0.11.0"
   }
 }
diff --git a/EXAMPLES/src/WebpackEntry.res b/EXAMPLES/src/WebpackEntry.res
@@ -1,4 +1,4 @@
 switch ReactDOM.querySelector("#root") {
-| Some(root) => ReactDOM.render(<App />, root)
+| Some(el) => ReactDOM.Client.createRoot(el)->ReactDOM.Client.Root.render(<App />)
 | None => ()
 }
diff --git a/EXAMPLES/src/clientUsage/AsyncAwait.res b/EXAMPLES/src/clientUsage/AsyncAwait.res
@@ -0,0 +1,49 @@
+module ApolloError = ApolloClient.Types.ApolloError
+
+module DuplicateTodoMutation = %graphql(`
+    mutation AddTodo($text: String!) {
+      todo: addTodoSimple(text: $text) {
+        id
+        text
+      }
+    }
+  `)
+
+module TodosQuery = %graphql(`
+    query TodosQuery {
+      todos: allTodos {
+        id
+        text
+        completed
+      }
+    }
+  `)
+
+let client = Apollo.client
+
+let func = async () => {
+  let result = await client.query(~query=module(TodosQuery), ())
+
+  let firstTodo = switch result {
+  | Ok({data: {todos}}) =>
+    switch todos->Belt.Array.get(0) {
+    | Some(firstTodo) => Ok(firstTodo)
+    | None => Error(ApolloError.make(~errorMessage="No To-Dos!", ()))
+    }
+  | Error(_) as error => error
+  }
+
+  let result = await (
+    switch firstTodo {
+    | Ok(firstTodo) =>
+      client.mutate(~mutation=module(DuplicateTodoMutation), {text: firstTodo.text})
+    | Error(_) as error => Promise.resolve(error)
+    }
+  )
+
+  switch result {
+  | Ok(_) => Js.log("Duplicated first todo!")
+  | Error(apolloError) => Js.log2("Something went wrong: ", apolloError.message)
+  }
+}
+func()->ignore
diff --git a/EXAMPLES/src/clientUsage/ClientBasics.res b/EXAMPLES/src/clientUsage/ClientBasics.res
@@ -1,49 +1,46 @@
 module ApolloQueryResult = ApolloClient.Types.ApolloQueryResult
 module ObservableQuery = ApolloClient.Types.ObservableQuery
 
-module AddTodoMutation = %graphql(
-  `
+module AddTodoMutation = %graphql(`
     mutation AddTodo($text: String!) {
       todo: addTodoSimple(text: $text) {
         id
         text
       }
     }
-  `
-)
+  `)
 
-module TodosQuery = %graphql(
-  `
+module TodosQuery = %graphql(`
     query TodosQuery {
       todos: allTodos {
         id
         text
         completed
       }
     }
-  `
-)
+  `)
 
-module StatsSubscription = %graphql(
-  `
+module StatsSubscription = %graphql(`
     subscription SorryItsNotASubscriptionForTodos {
       siteStatisticsUpdated {
         currentVisitorsOnline
       }
     }
-  `
-)
+  `)
 
-let logTodos = _ => Apollo.client.query(~query=module(TodosQuery), ())->Promise.map(result =>
+let logTodos = _ =>
+  Apollo.client.query(~query=module(TodosQuery), ())
+  ->Promise.thenResolve(result =>
     switch result {
     | Ok({data: {todos}}) => Js.log2("query To-Dos: ", todos)
     | Error(error) => Js.log2("Error: ", error)
     }
-  )->ignore
+  )
+  ->ignore
 
 let addTodo = _ =>
   Apollo.client.mutate(~mutation=module(AddTodoMutation), {text: "Another To-Do"})
-  ->Promise.map(result =>
+  ->Promise.thenResolve(result =>
     switch result {
     | Ok({data}) => Js.log2("mutate result: ", data)
     | Error(error) => Js.log2("Error: ", error)
@@ -76,7 +73,11 @@ let statsSubscription = Apollo.client.subscribe(
 @react.component
 let make = () =>
   <div>
-    <p> <button onClick=logTodos> {"Log To-Dos (Reason Promise)"->React.string} </button> </p>
-    <p> <button onClick=addTodo> {"Add To-Do"->React.string} </button> </p>
+    <p>
+      <button onClick=logTodos> {"Log To-Dos (Reason Promise)"->React.string} </button>
+    </p>
+    <p>
+      <button onClick=addTodo> {"Add To-Do"->React.string} </button>
+    </p>
     <p> {"[ To-Dos also logged in console with watchQuery ]"->React.string} </p>
   </div>
diff --git a/EXAMPLES/src/clientUsage/PromiseChaining.res b/EXAMPLES/src/clientUsage/PromiseChaining.res
@@ -1,31 +1,28 @@
 module ApolloError = ApolloClient.Types.ApolloError
 
-module DuplicateTodoMutation = %graphql(
-  `
+module DuplicateTodoMutation = %graphql(`
     mutation AddTodo($text: String!) {
       todo: addTodoSimple(text: $text) {
         id
         text
       }
     }
-  `
-)
+  `)
 
-module TodosQuery = %graphql(
-  `
+module TodosQuery = %graphql(`
     query TodosQuery {
       todos: allTodos {
         id
         text
         completed
       }
     }
-  `
-)
+  `)
 
 let client = Apollo.client
 
-client.query(~query=module(TodosQuery), ())->Promise.map(result =>
+client.query(~query=module(TodosQuery), ())
+->Promise.thenResolve(result =>
   switch result {
   | Ok({data: {todos}}) =>
     switch todos->Belt.Array.get(0) {
@@ -34,16 +31,19 @@ client.query(~query=module(TodosQuery), ())->Promise.map(result =>
     }
   | Error(_) as error => error
   }
-)->Promise.then(result =>
+)
+->Promise.then(result =>
   switch result {
   | Ok(firstTodo) => client.mutate(~mutation=module(DuplicateTodoMutation), {text: firstTodo.text})
   | Error(_) as error => Promise.resolve(error)
   }
-)->Promise.then(result =>
+)
+->Promise.then(result =>
   Promise.resolve(
     switch result {
     | Ok(_) => Js.log("Duplicated first todo!")
     | Error(apolloError) => Js.log2("Something went wrong: ", apolloError.message)
     },
   )
-)->ignore
+)
+->ignore
diff --git a/EXAMPLES/src/docs/Docs.res b/EXAMPLES/src/docs/Docs.res
@@ -1,7 +1,6 @@
 /**
  This file used for formatting/typechecking of code snippets on the documentation website
  */
-
 module TodosQuery = %graphql(`
     query TodosQuery {
       todos: allTodos {
@@ -20,7 +19,9 @@ module Basics = {
     | {error: Some(_error)} => "Error loading data"->React.string
     | {data: Some({todos})} =>
       <div>
-        {"There are "->React.string} {todos->Belt.Array.length->React.int} {" To-Dos"->React.string}
+        {"There are "->React.string}
+        {todos->Belt.Array.length->React.int}
+        {" To-Dos"->React.string}
       </div>
     | {data: None, error: None, loading: false} =>
       "I hope this is impossible, but sometimes it's not!"->React.string
@@ -63,14 +64,16 @@ module Lazy = {
     let (executeQuery, queryResult) = TodosQuery.useLazy()
     <div>
       {switch queryResult {
-      | Unexecuted(_) => <>
+      | Unexecuted(_) =>
+        <>
           {"Waiting to be executed... "->React.string}
           <button onClick={_ => executeQuery()->Ignore.promise} value="execute">
             {"Execute"->React.string}
           </button>
         </>
       | Executed({loading: true, data: None}) => <p> {"Loading"->React.string} </p>
-      | Executed({loading, data: Some({todos}), error}) => <>
+      | Executed({loading, data: Some({todos}), error}) =>
+        <>
           <dialog>
             {loading ? <p> {"Refreshing..."->React.string} </p> : React.null}
             {switch error {
@@ -114,7 +117,8 @@ module MutationTypical = {
     let (mutate, result) = AddTodoMutation.use()
 
     switch result {
-    | {called: false} => <>
+    | {called: false} =>
+      <>
         {"Not called... "->React.string}
         <button
           onClick={_ =>
@@ -172,7 +176,8 @@ module MutationTypical = {
     | {loading: true} => "Loading..."->React.string
     | {data: Some({todo: {text}}), error: None} =>
       <p> {React.string("To-Do added: \"" ++ (text ++ "\""))} </p>
-    | {error} => <>
+    | {error} =>
+      <>
         {"Error loading data"->React.string}
         {switch error {
         | Some(error) => React.string(": " ++ error.message)

diff --git a/EXAMPLES/src/fragmentsUsage/Query_Fragments.res b/EXAMPLES/src/fragmentsUsage/Query_Fragments.res
@@ -24,7 +24,8 @@ let make = () => {
   <div>
     {switch queryResult {
     | {loading: true, data: None} => <p> {"Loading"->React.string} </p>
-    | {loading, data: Some({todos}), error} => <>
+    | {loading, data: Some({todos}), error} =>
+      <>
         <dialog>
           {loading ? <p> {"Refreshing..."->React.string} </p> : React.null}
           {switch error {

diff --git a/EXAMPLES/src/hooksUsage/Mutation.res b/EXAMPLES/src/hooksUsage/Mutation.res
@@ -1,35 +1,32 @@
 module Cache = ApolloClient.Cache
 
-module AddTodoMutation = %graphql(
-  `
+module AddTodoMutation = %graphql(`
     mutation AddTodo($text: String!) {
       todo: addTodoSimple(text: $text) {
         id
         completed
         text
       }
     }
-  `
-)
+  `)
 
-module TodosQuery = %graphql(
-  `
+module TodosQuery = %graphql(`
     query TodosQuery {
       todos: allTodos {
         id
         completed
         text
       }
     }
-  `
-)
+  `)
 
 @react.component
 let make = () => {
   let (mutate, result) = AddTodoMutation.use()
 
   switch result {
-  | {called: false} => <>
+  | {called: false} =>
+    <>
       {"Not called... "->React.string}
       <button onClick={_ => mutate({text: "Another To-Do"})->ignore}>
         {"Add To-Do"->React.string}
@@ -49,12 +46,10 @@ let make = () => {
             ~update=({writeFragment, writeQuery}, {data}) =>
               switch data {
               | Some({todo}) =>
-                @ocaml.doc(
-                  "
+                @ocaml.doc("
                    * Apollo docs use cache.modify, but it's not typesafe. I recommend some
                    * combination of readQuery / writeQuery / writeFragment
-                   "
-                )
+                   ")
                 Js.log2("mutate.update To-Do: ", todo)
                 let _unusedRef = writeFragment(
                   ~fragment=module(Fragments.TodoItem),
@@ -95,7 +90,8 @@ let make = () => {
   | {loading: true} => "Loading..."->React.string
   | {data: Some({todo: {text}}), error: None} =>
     <p> {React.string("To-Do added: \"" ++ (text ++ "\""))} </p>
-  | {error} => <>
+  | {error} =>
+    <>
       {"Error loading data"->React.string}
       {switch error {
       | Some(error) => React.string(": " ++ error.message)