From 3a3e950b839c80e30e8a05ad03e78de676dea323 Mon Sep 17 00:00:00 2001
From: Charles Dang <exodia339@gmail.com>
Date: Tue, 5 May 2020 14:17:30 +1100
Subject: [PATCH 1/2] Refactored out use of fetch in Unsplash block

---
 .changeset/few-moles-talk.md                  |  6 ++
 .../Unsplash/views/blocks/unsplash-image.js   | 90 +++++++++----------
 2 files changed, 49 insertions(+), 47 deletions(-)
 create mode 100644 .changeset/few-moles-talk.md

diff --git a/.changeset/few-moles-talk.md b/.changeset/few-moles-talk.md
new file mode 100644
index 00000000000..85dc11f561c
--- /dev/null
+++ b/.changeset/few-moles-talk.md
@@ -0,0 +1,6 @@
+---
+'@keystonejs/app-admin-ui': minor
+'@keystonejs/fields': minor
+---
+
+Refactored the Unsplash content block to use Apollo query hooks.
diff --git a/packages/fields/src/types/Unsplash/views/blocks/unsplash-image.js b/packages/fields/src/types/Unsplash/views/blocks/unsplash-image.js
index 2353861418f..e9f49d25a95 100644
--- a/packages/fields/src/types/Unsplash/views/blocks/unsplash-image.js
+++ b/packages/fields/src/types/Unsplash/views/blocks/unsplash-image.js
@@ -5,6 +5,9 @@ import pluralize from 'pluralize';
 import { BlockMenuItem } from '@keystonejs/field-content/block-components';
 import { Input } from '@arch-ui/input';
 
+import { useQuery } from '@apollo/react-hooks';
+import gql from 'graphql-tag';
+
 export let type = 'unsplashImage';
 
 // TODO: Receive this value from the server somehow. 'pluralize' is a fairly
@@ -110,60 +113,53 @@ const UnsplashImage = ({ width, height, unsplashId, publicUrl, alt, user, onClic
   );
 };
 
+const UNSPLASH_SEARCH_QUERY = gql`
+  query searchImages($query: String!, $page: Int, $perPage: Int, $width: String) {
+    searchUnsplash(query: $query, perPage: $perPage, page: $page) {
+      total
+      totalPages
+      results {
+        id
+        unsplashId
+        publicUrl: publicUrlTransformed(transformation: { w: $width })
+        width
+        height
+        alt
+        user {
+          name
+          url
+        }
+      }
+    }
+  }
+`;
+
 const Search = ({ onSelect }) => {
   const options = useContext(Context);
   const [searchPage, setSearchPage] = useState(1);
   const [searchTerm, setSearchTerm] = useState('');
-  const [searchResults, setSearchResults] = useState();
+
+  const [getUnsplashImages, { data: { searchUnsplash: searchResults } = {} }] = useLazyQuery(
+    UNSPLASH_SEARCH_QUERY,
+    {
+      variables: {
+        query: searchTerm,
+        page: searchPage,
+        perPage: RESULTS_PER_PAGE,
+        width: RESULTS_WIDTH,
+      },
+    }
+  );
 
   const showPrevious = useCallback(() => {
-    const newPage = Math.max(1, searchPage - 1);
-    setSearchPage(newPage);
-    getUnsplashImages(searchTerm, newPage);
-  }, [searchPage, setSearchPage, searchTerm]);
+    setSearchPage(Math.max(1, searchPage - 1));
+  }, [searchPage]);
 
   const showNext = useCallback(() => {
-    const newPage = Math.min(
-      (searchResults && searchResults.totalPages) || Infinity,
-      searchPage + 1
+    setSearchPage(
+      Math.min((searchResults && searchResults.totalPages) || Infinity, searchPage + 1)
     );
-    setSearchPage(newPage);
-    getUnsplashImages(searchTerm, newPage);
-  }, [searchPage, setSearchPage, searchTerm]);
-
-  const getUnsplashImages = (query, page) => {
-    fetch(options.adminMeta.apiPath, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        variables: { query, page, perPage: RESULTS_PER_PAGE, width: RESULTS_WIDTH },
-        query: `query searchImages($query: String!, $page: Int, $perPage: Int, $width: String) {
-          searchUnsplash(query: $query, perPage: $perPage, page: $page) {
-            total
-            totalPages
-            results {
-              id
-              unsplashId
-              publicUrl: publicUrlTransformed(transformation: { w: $width})
-              width
-              height
-              alt
-              user {
-                name
-                url
-              }
-            }
-          }
-        }`,
-      }),
-    })
-      .then(x => x.json())
-      .then(results => {
-        setSearchResults(results.data.searchUnsplash);
-      });
-  };
+  }, [searchPage]);
 
   const onChange = useCallback(
     event => {
@@ -171,10 +167,10 @@ const Search = ({ onSelect }) => {
       event.stopPropagation();
       setSearchTerm(event.target.value);
       if (event.target.value.length > 3) {
-        getUnsplashImages(event.target.value, 1);
+        getUnsplashImages();
       }
     },
-    [searchTerm, setSearchTerm]
+    [getUnsplashImages]
   );
 
   const unsplashUrl = attributeUrl('https://unsplash.com', options.attribution);

From 545b9fc5ddd2945b04313a187a4ba0a2e5454581 Mon Sep 17 00:00:00 2001
From: Charles Dang <exodia339@gmail.com>
Date: Tue, 5 May 2020 14:26:05 +1100
Subject: [PATCH 2/2] Fixup

---
 .../fields/src/types/Unsplash/views/blocks/unsplash-image.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fields/src/types/Unsplash/views/blocks/unsplash-image.js b/packages/fields/src/types/Unsplash/views/blocks/unsplash-image.js
index e9f49d25a95..202d58ac879 100644
--- a/packages/fields/src/types/Unsplash/views/blocks/unsplash-image.js
+++ b/packages/fields/src/types/Unsplash/views/blocks/unsplash-image.js
@@ -5,7 +5,7 @@ import pluralize from 'pluralize';
 import { BlockMenuItem } from '@keystonejs/field-content/block-components';
 import { Input } from '@arch-ui/input';
 
-import { useQuery } from '@apollo/react-hooks';
+import { useLazyQuery } from '@apollo/react-hooks';
 import gql from 'graphql-tag';
 
 export let type = 'unsplashImage';