graphql add inputs

src/routes/graph-ql/index.jsx

@@ -1,8 +1,12 @@
+import { useRef } from 'react';
 import { useQuery, useMutation, useLazyQuery } from '@apollo/react-hooks';
 import { gql } from 'apollo-boost';
 
 
 const GQL = () => {
+  const email = useRef();
+  const password = useRef();
+
   const query = gql`
   query Login($login: String!, $password: String!) {
       login(login: $login, password: $password)  
@@ -21,7 +25,11 @@ mutation CreateUser($login: String!, $password: String!) {
 const [mutateFunction, { data, loading, error }]  = useMutation(foo);
 // const [login, { data }] = useLazyQuery(query);
 const go = () => {
-  mutateFunction({ variables: { login: "test1@test.com", password: 'qwerty' } })
+  const data = {
+    login: email.current.value,
+    password: password.current.value,
+  }
+  mutateFunction({ variables: data })
 }
 
 const lgn = () => {
@@ -31,10 +39,17 @@ const lgn = () => {
 console.log('data', data)
   return (
     <div>
+      <input type="email" ref={email} />
+      <input type="password" ref={password} />
+
       Hello
 
       <button onClick={lgn}>lgn</button>
       <button onClick={go}>GO</button>
+
+      <pre>
+        {JSON.stringify(data, null, 2)}
+      </pre>
     </div>
   )
 }