feat(react): useFragment hook (BETA)

examples/with-defer-stream-directives/src/App.jsx

@@ -13,6 +13,7 @@ const cache = cacheExchange({
 });
 
 const client = new Client({
+  suspense: true,
   url: 'http://localhost:3004/graphql',
   exchanges: [cache, fetchExchange],
 });

examples/with-defer-stream-directives/src/Songs.jsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { gql, useQuery } from 'urql';
+import React, { Suspense } from 'react';
+import { gql, useQuery, useFragment } from 'urql';
 
 const SecondVerseFragment = gql`
   fragment secondVerseFields on Song {
@@ -13,9 +13,6 @@ const SONGS_QUERY = gql`
       firstVerse
       ...secondVerseFields @defer
     }
-    alphabet @stream(initialCount: 3) {
-      char
-    }
   }
 
   ${SecondVerseFragment}
@@ -25,11 +22,22 @@ const Song = React.memo(function Song({ song }) {
   return (
     <section>
       <p>{song.firstVerse}</p>
+      <Suspense fallback={'Loading song 2...'}>
+        <DeferredSong data={song} />
+      </Suspense>
       <p>{song.secondVerse}</p>
     </section>
   );
 });
 
+const DeferredSong = ({ data }) => {
+  const result = useFragment({
+    query: SecondVerseFragment,
+    data,
+  });
+  return <p>{result.secondVerse}</p>;
+};
+
 const LocationsList = () => {
   const [result] = useQuery({
     query: SONGS_QUERY,
@@ -42,9 +50,6 @@ const LocationsList = () => {
       {data && (
         <>
           <Song song={data.song} />
-          {data.alphabet.map(i => (
-            <div key={i.char}>{i.char}</div>
-          ))}
         </>
       )}
     </div>

packages/react-urql/src/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './useMutation';
 export * from './useQuery';
+export * from './useFragment';
 export * from './useSubscription';