From feb1fd62f4829d804e877a6ed42b6a92f9bf1de5 Mon Sep 17 00:00:00 2001 From: anuveyatsu Date: Tue, 24 Aug 2021 12:15:03 +0600 Subject: [PATCH] [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 | 4 +- .../catalog/components/dataset/Resources.tsx | 4 +- .../catalog/components/resource/About.tsx | 4 +- .../components/resource/DataExplorer.tsx | 4 +- examples/catalog/graphql/queries.ts | 50 +++---------------- .../[org]/[dataset]/r/[resource]/index.tsx | 6 +-- 6 files changed, 17 insertions(+), 55 deletions(-) diff --git a/examples/catalog/components/dataset/About.tsx b/examples/catalog/components/dataset/About.tsx index 50c2d3cb..1cf2ee23 100644 --- a/examples/catalog/components/dataset/About.tsx +++ b/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 diff --git a/examples/catalog/components/dataset/Resources.tsx b/examples/catalog/components/dataset/Resources.tsx index 43697ce4..9a210032 100644 --- a/examples/catalog/components/dataset/Resources.tsx +++ b/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 diff --git a/examples/catalog/components/resource/About.tsx b/examples/catalog/components/resource/About.tsx index a4f21d02..16b358b6 100644 --- a/examples/catalog/components/resource/About.tsx +++ b/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 diff --git a/examples/catalog/components/resource/DataExplorer.tsx b/examples/catalog/components/resource/DataExplorer.tsx index 0c42d156..264b408c 100644 --- a/examples/catalog/components/resource/DataExplorer.tsx +++ b/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 diff --git a/examples/catalog/graphql/queries.ts b/examples/catalog/graphql/queries.ts index a1dfa00c..a5c37edf 100644 --- a/examples/catalog/graphql/queries.ts +++ b/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) diff --git a/examples/catalog/pages/[org]/[dataset]/r/[resource]/index.tsx b/examples/catalog/pages/[org]/[dataset]/r/[resource]/index.tsx index 272631f9..f09113c1 100644 --- a/examples/catalog/pages/[org]/[dataset]/r/[resource]/index.tsx +++ b/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
Loading
; 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, });