Send query to server

Changes:
- home.rs
- Cargo.toml
- README.md

Close #4

Author: BLYKIM

Cargo.lock

@@ -6,5 +6,6 @@ edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
+gloo-net = "0.2"
 wasm-bindgen ="^0.2"
 yew = "^0.19"

Cargo.toml

@@ -6,5 +6,5 @@ Build and serve with Trunk. Should be running on <http://127.0.0.1:8080>.
 
 ```sh
 trunk build
-trunk serve
+trunk serve --proxy-backend="http://127.0.0.1:8000/graphql"
 ```

README.md

@@ -1,8 +1,16 @@
+use gloo_net::http::Request;
 use yew::prelude::*;
 
-pub enum Message {}
+const QUERY: &str = "{\"query\": \"{ issues }\"}";
 
-pub struct Model {}
+pub enum Message {
+    QueryResult(String),
+    Err,
+}
+
+pub struct Model {
+    res_query: String,
+}
 
 #[derive(Properties, Clone, PartialEq)]
 pub struct Props {}
@@ -12,17 +20,42 @@ impl Component for Model {
     type Properties = Props;
 
     fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
+        Self {
+            res_query: String::new(),
+        }
     }
 
-    fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool {
-        true
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            Message::QueryResult(text) => {
+                self.res_query = text;
+                true
+            }
+            Message::Err => false,
+        }
     }
 
-    fn view(&self, _ctx: &Context<Self>) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        ctx.link().send_future(async move {
+            if let Ok(res) = Request::post("/graphql")
+                .header("Content-Type", "application/json")
+                .body(QUERY)
+                .send()
+                .await
+            {
+                if let Ok(text) = res.text().await {
+                    Message::QueryResult(text)
+                } else {
+                    Message::Err
+                }
+            } else {
+                Message::Err
+            }
+        });
         html! {
             <div>
-                <p>{ "AICE GitHub Dashboard" }</p>
+            <p>{ "AICE GitHub Dashboard" }</p>
+            <p>{self.res_query.clone()}</p>
             </div>
         }
     }