[dataset page][m]: setup dataset page to work with Apollo client connected to CKAN API.

components/dataset/About.tsx

@@ -4,10 +4,12 @@ import { useQuery } from '@apollo/react-hooks';
 import gql from 'graphql-tag';
 
 export const GET_DATAPACKAGE_QUERY = gql`
-  query dataset($id: String!) {
+  query dataset($id: String) {
-    dataset(id: $id) {
+    dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
       result {
         name
+        title
+        size
         metadata_created
         metadata_modified
         resources {

components/dataset/Org.tsx

@@ -5,8 +5,8 @@ import { useQuery } from '@apollo/react-hooks';
 import gql from 'graphql-tag';
 
 export const GET_ORG_QUERY = gql`
-  query dataset($id: String!) {
+  query dataset($id: String) {
-    dataset(id: $id) {
+    dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
       result {
         organization {
           name

components/dataset/Resources.tsx

@@ -4,9 +4,9 @@ import { NetworkStatus } from 'apollo-client';
 import { useQuery } from '@apollo/react-hooks';
 import gql from 'graphql-tag';
 
-export const DEFAULT_DATASET_QUERY = gql`
+export const GET_DATAPACKAGE_QUERY = gql`
-  query dataset($id: String!) {
+  query dataset($id: String) {
-    dataset(id: $id) {
+    dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
       result {
         name
         resources {
@@ -23,7 +23,7 @@ export const DEFAULT_DATASET_QUERY = gql`
 
 export default function Resources({ variables }) {
   const { loading, error, data, fetchMore, networkStatus } = useQuery(
-    DEFAULT_DATASET_QUERY,
+    GET_DATAPACKAGE_QUERY,
     {
       variables,
       // Setting this value to true will make the component rerender when

lib/apolloClient.ts

@@ -28,6 +28,25 @@ const restLink = new RestLink({
       }
       return data;
     },
+    Response: (
+      data: any,
+      outerType: string,
+      patchDeeper: RestLink.FunctionalTypePatcher
+    ): any => {
+      if (data.result != null) {
+        data.result.__typename = 'Package';
+        if (data.result.organization != null) {
+          data.result.organization.__typename = 'Organization';
+        }
+
+        if (data.result.resources != null) {
+          data.result.resources = data.result.resources.map((item) => {
+            return { __typename: 'Resource', ...item };
+          });
+        }
+      }
+      return data;
+    },
   },
 });
 

mocks/index.js

@@ -28,6 +28,7 @@ const gdp = {
   },
   metadata_created: '2019-03-07T11:56:19.696257',
   metadata_modified: '2019-03-07T12:03:58.817280',
+  size: '',
 };
 
 const population = {

pages/[org]/[dataset]/index.tsx

@@ -6,16 +6,40 @@ import Head from 'next/head';
 import Nav from '../../../components/home/Nav';
 import About from '../../../components/dataset/About';
 import Org from '../../../components/dataset/Org';
-import Resources, {
+import Resources from '../../../components/dataset/Resources';
-  DEFAULT_DATASET_QUERY,
+import gql from 'graphql-tag';
-} from '../../../components/dataset/Resources';
+
+const QUERY = gql`
+  query dataset($id: String) {
+    dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
+      result {
+        name
+        title
+        size
+        metadata_created
+        metadata_modified
+        resources {
+          name
+          title
+          format
+          created
+          last_modified
+        }
+        organization {
+          name
+          title
+          image_url
+        }
+      }
+    }
+  }
+`;
 
 function Dataset({ variables }) {
-  const {
+  const { data, loading } = useQuery(QUERY, { variables });
-    data: {
+
-      dataset: { result },
+  if (loading) return <div>Loading</div>;
-    },
+  const { result } = data.dataset;
-  } = useQuery(DEFAULT_DATASET_QUERY, { variables });
 
   return (
     <>
@@ -42,8 +66,8 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     id: context.query.dataset,
   };
 
-  const apolloResponse = await apolloClient.query({
+  await apolloClient.query({
-    query: DEFAULT_DATASET_QUERY,
+    query: QUERY,
     variables,
   });