[home page][xs]: integrate with Apollo.

components/home/Recent.tsx

@@ -1,11 +1,46 @@
 import Link from 'next/link';
+import ErrorMessage from '../Error';
+import { useQuery } from '@apollo/react-hooks';
+import gql from 'graphql-tag';
+
+export const QUERY = gql`
+  query search($q: String, $sort: String) {
+    search(q: $q, sort: $sort)
+      @rest(type: "Search", path: "package_search?{args}") {
+      result {
+        results {
+          name
+          title
+          organization {
+            name
+            title
+            description
+          }
+        }
+      }
+    }
+  }
+`;
+
+function Recent() {
+  const { loading, error, data } = useQuery(QUERY, {
+    sort: 'sort=metadata_created%20desc',
+    // Setting this value to true will make the component rerender when
+    // the "networkStatus" changes, so we are able to know if it is fetching
+    // more data
+    notifyOnNetworkStatusChange: true,
+  });
+
+  if (error) return <ErrorMessage message="Error loading search results." />;
+  if (loading) return <div>Loading</div>;
+
+  const { result } = data.search;
 
-function Recent({ datapackages }) {
   return (
     <section className="my-10 mx-4 lg:my-20">
       <h1 className="text-2xl font-thin mb-4">Recent Datasets</h1>
       <div className="flex flex-col lg:flex-row">
-        {datapackages.map((resource, index) => (
+        {result.results.map((resource, index) => (
           <div
             key={index}
             className="border px-4 mb-4 mr-3 border-gray-100 w-5/6 shadow-sm"

pages/index.tsx

@@ -1,7 +1,8 @@
-import Head from 'next/head';
 import { GetServerSideProps } from 'next';
+import { initializeApollo } from '../lib/apolloClient';
+import Head from 'next/head';
 import Nav from '../components/home/Nav';
-import Recent from '../components/home/Recent';
+import Recent, { QUERY } from '../components/home/Recent';
 import Form from '../components/search/Form';
 
 function Home({ datapackages }) {
@@ -29,22 +30,21 @@ function Home({ datapackages }) {
           <img src="/images/banner.svg" className="w-4/5" />
         </div>
       </section>
-      <Recent datapackages={datapackages} />
+      <Recent />
     </div>
   );
 }
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
-  const res = await fetch(
-    `${config.get(
-      'DMS'
-    )}/api/3/action/package_search?sort=metadata_created%20desc`
-  );
-  const ckanResult = (await res.json()).result;
-  const datapackages = ckanResult.results;
+  const apolloClient = initializeApollo();
+
+  await apolloClient.query({
+    query: QUERY,
+  });
+
   return {
     props: {
-      datapackages,
+      initialApolloState: apolloClient.cache.extract(),
     },
   };
 };