[apollo][l]: initial commit for setting up Apollo.

components/search/List.tsx

@@ -1,9 +1,34 @@
 import Item from './Item';
+import { useQuery } from '@apollo/react-hooks';
+import gql from 'graphql-tag';
+
+export const DEFAULT_SEARCH_QUERY = gql`
+  search($query: SearchQuery!) {
+    result {
+      results
+    }
+  }
+`;
+
+export default function List() {
+  const { loading, error, data, fetchMore, networkStatus } = useQuery(
+    DEFAULT_SEARCH_QUERY,
+    {
+      // 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 posts." />;
+  if (loading) return <div>Loading</div>;
+
+  const { result } = data;
 
-export default function List({ datapackages }) {
   return (
     <ul>
-      {datapackages.map((datapackage, index) => (
+      {result.map((datapackage, index) => (
         <Item datapackage={datapackage} key={index} />
       ))}
     </ul>