Apollo cache implemenation

Author: gsaini

package-lock.json

@@ -14,6 +14,7 @@
     "graphql": "^15.0.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
     "typescript": "~3.7.2"
   },

package.json

@@ -2,6 +2,9 @@ import React from 'react';
 import ExchangeRates from './components/ExchangeRates';
 import logo from './logo.svg';
 import './App.css';
+import {
+  Link
+} from "react-router-dom";
 
 function App() {
   return (
@@ -19,6 +22,9 @@ function App() {
         >
           Learn React
         </a>
+        <Link to="/books">Books</Link>
+        <Link to="/todos">Todos</Link>
+
         <ExchangeRates />
       </header>
     </div>

src/App.tsx

@@ -3,7 +3,7 @@ import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
 const client = new ApolloClient({
   cache: new InMemoryCache(),
   link: new HttpLink({
-    uri: 'https://48p1r2roz4.sse.codesandbox.io',
+    uri: 'http://localhost:4000',
   })
 });
 

src/apollo/client.ts

@@ -0,0 +1,21 @@
+import { gql } from '@apollo/client';
+
+const GET_BOOKS = gql`
+  {
+    books {
+      title
+      author
+    }
+  }
+`;
+
+const ADD_BOOK = gql`
+  mutation addBook($title: String!, $author: String!) {
+    addBook(title: $title, author: $author) {
+      title
+      author
+    }
+  }
+`;
+
+export { GET_BOOKS, ADD_BOOK };

src/components/Books/gql.ts

@@ -0,0 +1,55 @@
+import React, { useRef } from 'react';
+import { useQuery, useMutation } from '@apollo/client';
+import { GET_BOOKS, ADD_BOOK } from './gql';
+
+export default function Books() {
+  const bookTitle = useRef(null);
+  const bookAuthor = useRef(null);
+
+  const { loading, error, data } = useQuery(GET_BOOKS);
+  const [addBook] = useMutation(ADD_BOOK, {
+    update(cache, { data: { addBook } }) {
+      const { books }: any = cache.readQuery({ query: GET_BOOKS });
+
+      cache.writeQuery({
+        query: GET_BOOKS,
+        data: { 
+          books: [...books, addBook]
+        }
+      });
+    }
+  });
+
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error :(</p>;
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    
+    addBook({ variables: { title: event.target.title.value, author: event.target.author.value } });
+
+    event.target.title = '';
+    event.target.author = '';
+  }
+
+  return (
+    <section>
+      <ul>
+        {
+          data.books.map(({ title, author }) => (
+            <li key={title}>
+              {title}: {author}
+            </li>
+          ))
+        }
+      </ul>
+      <form onSubmit={(e) => handleSubmit(e)} style={{ display:'flex', flexDirection: 'row' }}>
+        <label htmlFor="title">Title:</label>
+        <input type="text" id="title" name="title" ref={bookTitle} />
+        <label htmlFor="author">Book:</label>
+        <input type="text" id="author" name="author" ref={bookAuthor}/>
+        <button type="submit">Submit</button>
+      </form>
+    </section>
+  );
+}

src/components/Books/index.tsx

@@ -2,9 +2,9 @@ import { gql } from '@apollo/client';
 
 const EXCHANGE_RATES = gql`
   {
-    rates(currency: "USD") {
-      currency
-      rate
+    books {
+      title
+      author
     }
   }
 `;

src/components/ExchangeRates/gql.ts

@@ -1,17 +1,17 @@
 import React from 'react';
 import { useQuery } from '@apollo/client';
-import EXCHANGE_RATES from './gql';
+import {GET_BOOKS} from '../Books/gql';
 
 export default function ExchangeRates() {
-  const { loading, error, data } = useQuery(EXCHANGE_RATES);
+  const { loading, error, data } = useQuery(GET_BOOKS);
 
   if (loading) return <p>Loading...</p>;
   if (error) return <p>Error :(</p>;
 
-  return data.rates.map(({ currency, rate }) => (
-    <div key={currency}>
+  return data.books.map(({ title, author }) => (
+    <div key={title}>
       <p>
-        {currency}: {rate}
+        {title}: {author}
       </p>
     </div>
   ));

src/components/ExchangeRates/index.tsx

@@ -0,0 +1,21 @@
+import { gql } from "@apollo/client";
+
+const GET_TODOS = gql`
+  query GetTodos {
+    todos {
+      id
+      type
+    }
+  }
+`;
+
+const UPDATE_TODO = gql`
+  mutation UpdateTodo($id: String!, $type: String!) {
+    updateTodo(id: $id, type: $type) {
+      id
+      type
+    }
+  }
+`;
+
+export { GET_TODOS, UPDATE_TODO };

src/components/Todos/gql.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useQuery, useMutation } from '@apollo/client';
+import { GET_TODOS, UPDATE_TODO } from './gql';
+
+export default function Todos() {
+  const { loading, error, data } = useQuery(GET_TODOS);
+  const [updateTodo] = useMutation(UPDATE_TODO);
+
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error :(</p>;
+
+  return (
+    <div>
+      {
+        data.todos.map(({ id, type }) => {
+          let input;
+
+          return (
+            <div key={id}>
+              <p>{type}</p>
+              <form
+                onSubmit={e => {
+                  e.preventDefault();
+                  updateTodo({ variables: { id, type: input.value } });
+
+                  input.value = '';
+                }}
+              >
+                <input
+                  ref={node => {
+                    input = node;
+                  }}
+                />
+                <button type="submit">Update Todo</button>
+              </form>
+            </div>
+          );
+        })
+      }
+    </div>);
+}