[catalog/queries][s]: optimized the way we query graphql so that we only use single query for dataset/resource pages. It also fixes some buggy behaviour of next.js described in https://github.com/vercel/next.js/issues/8563.

examples/catalog/components/dataset/About.tsx

@@ -1,10 +1,10 @@
 import { useQuery } from '@apollo/react-hooks';
 import { ErrorMessage } from '../_shared';
-import { GET_DATAPACKAGE_QUERY } from '../../graphql/queries';
+import { GET_DATASET_QUERY } from '../../graphql/queries';
 import { KeyInfo } from 'portal';
 
 const About: React.FC<{ variables: any }> = ({ variables }) => {
-  const { loading, error, data } = useQuery(GET_DATAPACKAGE_QUERY, {
+  const { loading, error, data } = useQuery(GET_DATASET_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

examples/catalog/components/dataset/Resources.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { useQuery } from '@apollo/react-hooks';
 import * as timeago from 'timeago.js';
 import { Table, ErrorMessage } from '../_shared';
-import { GET_RESOURCES_QUERY } from '../../graphql/queries';
+import { GET_DATASET_QUERY } from '../../graphql/queries';
 
 const columns = [
   {
@@ -42,7 +42,7 @@ const columns = [
 ];
 
 const Resources: React.FC<{ variables: any }> = ({ variables }) => {
-  const { loading, error, data } = useQuery(GET_RESOURCES_QUERY, {
+  const { loading, error, data } = useQuery(GET_DATASET_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

examples/catalog/components/resource/About.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable react/display-name */
 import { useQuery } from '@apollo/react-hooks';
 import { ErrorMessage } from '../_shared';
-import { GET_RESOURCES_QUERY } from '../../graphql/queries';
+import { GET_DATASET_QUERY } from '../../graphql/queries';
 import { ResourceInfo } from 'portal';
 
 const About: React.FC<{ variables: any }> = ({ variables }) => {
-  const { loading, error, data } = useQuery(GET_RESOURCES_QUERY, {
+  const { loading, error, data } = useQuery(GET_DATASET_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

examples/catalog/components/resource/DataExplorer.tsx

@@ -1,9 +1,9 @@
 import { useQuery } from '@apollo/react-hooks';
 import { ErrorMessage } from '../_shared';
-import { GET_RESOURCES_QUERY } from '../../graphql/queries';
+import { GET_DATASET_QUERY } from '../../graphql/queries';
 
 const DataExplorer: React.FC<{ variables: any }> = ({ variables }) => {
-  const { loading, error, data } = useQuery(GET_RESOURCES_QUERY, {
+  const { loading, error, data } = useQuery(GET_DATASET_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

examples/catalog/graphql/queries.ts

@@ -17,7 +17,7 @@ export const GET_ORG_QUERY = gql`
   }
 `;
 
-export const GET_DATAPACKAGE_QUERY = gql`
+export const GET_DATASET_QUERY = gql`
   query dataset($id: String) {
     dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
       result {
@@ -26,23 +26,6 @@ export const GET_DATAPACKAGE_QUERY = gql`
         size
         created: metadata_created
         updated: metadata_modified
-        resources {
-          name
-          id
-          title
-          format
-          size
-        }
-      }
-    }
-  }
-`;
-
-export const GET_RESOURCES_QUERY = gql`
-  query dataset($id: String) {
-    dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
-      result {
-        name
         resources {
           name
           title
@@ -53,6 +36,11 @@ export const GET_RESOURCES_QUERY = gql`
           updated: last_modified
           size
         }
+        organization {
+          name
+          title
+          image: image_url
+        }
       }
     }
   }
@@ -132,32 +120,6 @@ export const GET_PAGE_QUERY = gql`
   }
 `;
 
-export const GET_DATASET_QUERY = gql`
-  query dataset($id: String) {
-    dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
-      result {
-        name
-        title
-        size
-        created: metadata_created
-        updated: metadata_modified
-        resources {
-          name
-          title
-          format
-          created
-          updated: last_modified
-        }
-        organization {
-          name
-          title
-          image: image_url
-        }
-      }
-    }
-  }
-`;
-
 export const GET_POST_QUERY = gql`
   query post($slug: String) {
     post(slug: $slug)

examples/catalog/pages/[org]/[dataset]/r/[resource]/index.tsx

@@ -5,10 +5,10 @@ import { initializeApollo } from '../../../../../lib/apolloClient';
 import Nav from '../../../../../components/home/Nav';
 import About from '../../../../../components/resource/About';
 import DataExplorer from '../../../../../components/resource/DataExplorer';
-import { GET_RESOURCES_QUERY } from '../../../../../graphql/queries';
+import { GET_DATASET_QUERY } from '../../../../../graphql/queries';
 
 const Resource: React.FC<{ variables: any }> = ({ variables }) => {
-  const { data, loading } = useQuery(GET_RESOURCES_QUERY, { variables });
+  const { data, loading } = useQuery(GET_DATASET_QUERY, { variables });
 
   if (loading) return <div>Loading</div>;
   const result = data.dataset.result;
@@ -42,7 +42,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   };
 
   await apolloClient.query({
-    query: GET_RESOURCES_QUERY,
+    query: GET_DATASET_QUERY,
     variables,
   });