knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[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.

Browse Source
This commit is contained in:
anuveyatsu 2021-08-24 12:15:03 +06:00
parent 6bc36f9e3b
commit feb1fd62f4
6 changed files with 17 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/catalog/components/dataset/About.tsx
View File

@ -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

4
examples/catalog/components/dataset/Resources.tsx
View File

@ -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

4
examples/catalog/components/resource/About.tsx
View File

@ -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

4
examples/catalog/components/resource/DataExplorer.tsx
View File

@ -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

50
examples/catalog/graphql/queries.ts
View File

@ -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)

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

@ -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,
});