Update example to include Graphcache

urql-graphql · Aug 17, 2021 · 8bcd7a3 · 8bcd7a3
1 parent 41a743f
commit 8bcd7a3
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 8 deletions.
diff --git a/examples/with-defer-stream-directives/index.html b/examples/with-defer-stream-directives/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>with-apq</title>
+    <title>with-defer-stream-directives</title>
     <style>
       body {
         margin: 0;

diff --git a/examples/with-defer-stream-directives/package.json b/examples/with-defer-stream-directives/package.json
@@ -5,10 +5,9 @@
   "scripts": {
     "start": "concurrently -k \"vite\" \"node server/index.js\""
   },
-  "resolutions": {
-    "@urql/core": "2.3.0-defer.0"
-  },
   "dependencies": {
+    "@urql/core": "^2.3.0",
+    "@urql/exchange-graphcache": "^4.3.0",
     "graphql": "15.4.0-experimental-stream-defer.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

diff --git a/examples/with-defer-stream-directives/src/App.jsx b/examples/with-defer-stream-directives/src/App.jsx
@@ -3,16 +3,24 @@ import {
   createClient,
   Provider,
   dedupExchange,
-  cacheExchange,
   debugExchange,
   fetchExchange,
 } from 'urql';
 
+import { cacheExchange } from '@urql/exchange-graphcache';
+
 import Songs from './Songs';
 
+const cache = cacheExchange({
+  keys: {
+    Alphabet: data => data.char,
+    Song: () => null,
+  },
+});
+
 const client = createClient({
   url: 'http://localhost:3004/graphql',
-  exchanges: [dedupExchange, cacheExchange, debugExchange, fetchExchange],
+  exchanges: [dedupExchange, cache, debugExchange, fetchExchange],
 });
 
 function App() {

diff --git a/examples/with-defer-stream-directives/src/Songs.jsx b/examples/with-defer-stream-directives/src/Songs.jsx
@@ -21,6 +21,15 @@ const SONGS_QUERY = gql`
   ${SecondVerseFragment}
 `;
 
+const Song = React.memo(function Song({ song }) {
+  return (
+    <section>
+      <p>{song.firstVerse}</p>
+      <p>{song.secondVerse}</p>
+    </section>
+  );
+});
+
 const LocationsList = () => {
   const [result] = useQuery({
     query: SONGS_QUERY,
@@ -32,8 +41,7 @@ const LocationsList = () => {
     <div>
       {data && (
         <>
-          <p>{data.song.firstVerse}</p>
-          <p>{data.song.secondVerse}</p>
+          <Song song={data.song} />
           {data.alphabet.map(i => (
             <div key={i.char}>{i.char}</div>
           ))}