diff --git a/components/resource/About.tsx b/components/resource/About.tsx
index e4a28423..c750e3e7 100644
--- a/components/resource/About.tsx
+++ b/components/resource/About.tsx
@@ -1,6 +1,41 @@
 import Link from 'next/link';
+import ErrorMessage from '../Error';
+import { NetworkStatus } from 'apollo-client';
+import { useQuery } from '@apollo/react-hooks';
+import gql from 'graphql-tag';
 
-export default function About({ resource }) {
+export const QUERY = gql`
+  query dataset($id: String!) {
+    dataset(id: $id) {
+      result {
+        resources {
+          name
+          id
+          url
+          format
+          title
+          created
+          last_modified
+        }
+      }
+    }
+  }
+`;
+
+export default function About({ variables }) {
+  const { loading, error, data } = useQuery(QUERY, {
+    variables,
+    // 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 dataset." />;
+  if (loading) return <div>Loading</div>;
+
+  const { result } = data.dataset;
+  const resource = result.resources[0];
   return (
     <>
       <table className="table-auto w-full text-sm text-left my-6">
@@ -26,7 +61,7 @@ export default function About({ resource }) {
             <td className="px-4 py-2">{resource.created}</td>
             <td className="px-4 py-2">{resource.last_modified || ''}</td>
             <td className="px-4 py-2">
-              <Link href={resource.path}>
+              <Link href={resource.url}>
                 <a className="bg-white hover:bg-gray-200 border text-black font-semibold py-2 px-4 rounded">
                   {resource.format}
                 </a>
diff --git a/components/resource/DataExplorer.tsx b/components/resource/DataExplorer.tsx
index 6f2fbd8a..ee35308d 100644
--- a/components/resource/DataExplorer.tsx
+++ b/components/resource/DataExplorer.tsx
@@ -1,5 +1,41 @@
 import Link from 'next/link';
+import ErrorMessage from '../Error';
+import { NetworkStatus } from 'apollo-client';
+import { useQuery } from '@apollo/react-hooks';
+import gql from 'graphql-tag';
+
+export const QUERY = gql`
+  query dataset($id: String!) {
+    dataset(id: $id) {
+      result {
+        resources {
+          name
+          id
+          url
+          format
+          title
+          created
+          last_modified
+        }
+      }
+    }
+  }
+`;
+
+export default function DataExplorer({ variables }) {
+  const { loading, error, data } = useQuery(QUERY, {
+    variables,
+    // 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 dataset." />;
+  if (loading) return <div>Loading</div>;
+
+  const { result } = data.dataset;
+  const resource = result.resources[0];
 
-export default function DataExplorer({ resource }) {
   return <>{JSON.stringify(resource)}</>;
 }
diff --git a/pages/[org]/[dataset]/r/[resource]/index.tsx b/pages/[org]/[dataset]/r/[resource]/index.tsx
index ee9dfdd5..351841e5 100644
--- a/pages/[org]/[dataset]/r/[resource]/index.tsx
+++ b/pages/[org]/[dataset]/r/[resource]/index.tsx
@@ -1,4 +1,7 @@
 import { GetServerSideProps } from 'next';
+import gql from 'graphql-tag';
+import { useQuery } from '@apollo/react-hooks';
+import { initializeApollo } from '../../../../../lib/apolloClient';
 import config from '../../../../../config';
 import utils from '../../../../../utils';
 import Head from 'next/head';
@@ -6,39 +9,64 @@ import Nav from '../../../../../components/home/Nav';
 import About from '../../../../../components/resource/About';
 import DataExplorer from '../../../../../components/resource/DataExplorer';
 
-function Resource({ resource }) {
+const QUERY = gql`
+  query dataset($id: String!) {
+    dataset(id: $id) {
+      result {
+        resources {
+          name
+          title
+        }
+      }
+    }
+  }
+`;
+
+function Resource({ variables }) {
+  const {
+    data: {
+      dataset: { result },
+    },
+  } = useQuery(QUERY, { variables });
+
   return (
     <>
       <Head>
-        <title>Portal | {resource.title || resource.name}</title>
+        <title>
+          Portal | {result.resources[0].title || result.resources[0].name}
+        </title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <Nav />
       <main className="p-6">
         <h1 className="text-3xl font-semibold text-primary mb-2">
-          {resource.title || resource.name}
+          {result.resources[0].title || result.resources[0].name}
         </h1>
-        <About resource={resource} />
-        <DataExplorer resource={resource} />
+        <About variables={variables} />
+        <DataExplorer variables={variables} />
       </main>
     </>
   );
 }
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
-  const res = await fetch(
-    `${config.get('DMS')}/api/3/action/package_show?id=${context.query.dataset}`
-  );
-  const ckanResult = (await res.json()).result;
-  // Only keep single resource
-  ckanResult.resources = ckanResult.resources.filter((resource) => {
-    return (
-      resource.name === context.query.resource ||
-      resource.id === context.query.resource
-    );
+  const apolloClient = initializeApollo();
+  const variables = {
+    id: context.query.dataset,
+    resource: context.query.resource,
+  };
+
+  const apolloResponse = await apolloClient.query({
+    query: QUERY,
+    variables,
   });
-  const resourceDescriptor = utils.ckanToDataPackage(ckanResult).resources[0];
-  return { props: { resource: resourceDescriptor } };
+
+  return {
+    props: {
+      initialApolloState: apolloClient.cache.extract(),
+      variables,
+    },
+  };
 };
 
 export default Resource;