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

[refactor][m]: implement efficient gql management system (#41)

Browse Source
This commit is contained in:
Tavares Hansen
2020-08-03 18:39:17 -07:00
parent cee55cf10d
commit f8197f865c
18 changed files with 201 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/dataset/Org.tsx
View File

@@ -1,21 +1,7 @@
import Link from 'next/link'; import Link from 'next/link';
import ErrorMessage from '../Error';
import { useQuery } from '@apollo/react-hooks'; import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag'; import ErrorMessage from '../Error';
import { GET_ORG_QUERY } from '../../graphql/queries';
export const GET_ORG_QUERY = gql`
query dataset($id: String) {
dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
result {
organization {
name
title
image_url
}
}
}
}
`;
export default function Org({ variables }) { export default function Org({ variables }) {
const { loading, error, data } = useQuery(GET_ORG_QUERY, { const { loading, error, data } = useQuery(GET_ORG_QUERY, {

23
components/dataset/Resources.tsx
View File

@@ -1,27 +1,10 @@
import Link from 'next/link'; import Link from 'next/link';
import ErrorMessage from '../Error';
import { useQuery } from '@apollo/react-hooks'; import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag'; import ErrorMessage from '../Error';
import { GET_RESOURCES_QUERY } from '../../graphql/queries';
export const GET_DATAPACKAGE_QUERY = gql`
query dataset($id: String) {
dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
result {
name
resources {
name
title
format
created
last_modified
}
}
}
}
`;
export default function Resources({ variables }) { export default function Resources({ variables }) {
const { loading, error, data } = useQuery(GET_DATAPACKAGE_QUERY, { const { loading, error, data } = useQuery(GET_RESOURCES_QUERY, {
variables, variables,
// Setting this value to true will make the component rerender when // Setting this value to true will make the component rerender when
// the "networkStatus" changes, so we are able to know if it is fetching // the "networkStatus" changes, so we are able to know if it is fetching

25
components/home/Recent.tsx
View File

@@ -1,29 +1,10 @@
import Link from 'next/link'; import Link from 'next/link';
import ErrorMessage from '../Error';
import { useQuery } from '@apollo/react-hooks'; import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag'; import ErrorMessage from '../Error';
import { SEARCH_QUERY } from '../../graphql/queries';
export const QUERY = gql`
query search($q: String, $sort: String, $rows: Int) {
search(q: $q, sort: $sort, rows: $rows)
@rest(type: "Search", path: "package_search?{args}") {
result {
results {
name
title
organization {
name
title
description
}
}
}
}
}
`;
function Recent() { function Recent() {
const { loading, error, data } = useQuery(QUERY, { const { loading, error, data } = useQuery(SEARCH_QUERY, {
variables: { variables: {
sort: 'metadata_created desc', sort: 'metadata_created desc',
rows: 3, rows: 3,

27
components/resource/About.tsx
View File

@@ -1,30 +1,9 @@
import Link from 'next/link';
import ErrorMessage from '../Error';
import { useQuery } from '@apollo/react-hooks'; import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag'; import ErrorMessage from '../Error';
import { GET_RESOURCES_QUERY } from '../../graphql/queries';
const QUERY = gql`
query dataset($id: String) {
dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
result {
resources {
name
id
title
description
format
size
created
last_modified
url
}
}
}
}
`;
export default function About({ variables }) { export default function About({ variables }) {
const { loading, error, data } = useQuery(QUERY, { const { loading, error, data } = useQuery(GET_RESOURCES_QUERY, {
variables, variables,
// Setting this value to true will make the component rerender when // Setting this value to true will make the component rerender when
// the "networkStatus" changes, so we are able to know if it is fetching // the "networkStatus" changes, so we are able to know if it is fetching

27
components/resource/DataExplorer.tsx
View File

@@ -1,30 +1,9 @@
import Link from 'next/link';
import ErrorMessage from '../Error';
import { useQuery } from '@apollo/react-hooks'; import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag'; import ErrorMessage from '../Error';
import { GET_RESOURCES_QUERY } from '../../graphql/queries';
const QUERY = gql`
query dataset($id: String) {
dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
result {
resources {
name
id
title
description
format
size
created
last_modified
url
}
}
}
}
`;
export default function DataExplorer({ variables }) { export default function DataExplorer({ variables }) {
const { loading, error, data } = useQuery(QUERY, { const { loading, error, data } = useQuery(GET_RESOURCES_QUERY, {
variables, variables,
// Setting this value to true will make the component rerender when // Setting this value to true will make the component rerender when
// the "networkStatus" changes, so we are able to know if it is fetching // the "networkStatus" changes, so we are able to know if it is fetching

24
components/search/List.tsx
View File

@@ -1,28 +1,10 @@
import { useQuery } from '@apollo/react-hooks';
import Item from './Item'; import Item from './Item';
import ErrorMessage from '../Error'; import ErrorMessage from '../Error';
import { useQuery } from '@apollo/react-hooks'; import { SEARCH_QUERY } from '../../graphql/queries';
import gql from 'graphql-tag';
const QUERY = gql`
query search($q: String, $sort: String) {
search(q: $q, sort: $sort)
@rest(type: "Search", path: "package_search?{args}") {
result {
results {
name
title
organization {
name
title
}
}
}
}
}
`;
export default function List({ variables }) { export default function List({ variables }) {
const { loading, error, data } = useQuery(QUERY, { const { loading, error, data } = useQuery(SEARCH_QUERY, {
variables, variables,
// Setting this value to true will make the component rerender when // Setting this value to true will make the component rerender when
// the "networkStatus" changes, so we are able to know if it is fetching // the "networkStatus" changes, so we are able to know if it is fetching

17
components/search/Total.tsx
View File

@@ -1,20 +1,9 @@
import ErrorMessage from '../Error';
import { useQuery } from '@apollo/react-hooks'; import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag'; import ErrorMessage from '../Error';
import { GET_TOTAL_COUNT_QUERY } from '../../graphql/queries';
const QUERY = gql`
query search($q: String, $sort: String) {
search(q: $q, sort: $sort)
@rest(type: "Search", path: "package_search?{args}") {
result {
count
}
}
}
`;
export default function Total({ variables }) { export default function Total({ variables }) {
const { loading, error, data } = useQuery(QUERY, { const { loading, error, data } = useQuery(GET_TOTAL_COUNT_QUERY, {
variables, variables,
// Setting this value to true will make the component rerender when // Setting this value to true will make the component rerender when
// the "networkStatus" changes, so we are able to know if it is fetching // the "networkStatus" changes, so we are able to know if it is fetching

15
components/static/List.tsx
View File

@@ -1,19 +1,10 @@
import ErrorMessage from '../Error';
import parse from 'html-react-parser'; import parse from 'html-react-parser';
import { useQuery } from '@apollo/react-hooks'; import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag'; import ErrorMessage from '../Error';
import { GET_POSTS_QUERY } from '../../graphql/queries';
const QUERY = gql`
query posts {
posts @rest(type: "Posts", path: "", endpoint: "wordpress-posts") {
found
posts
}
}
`;
export default function List() { export default function List() {
const { loading, error, data } = useQuery(QUERY, { const { loading, error, data } = useQuery(GET_POSTS_QUERY, {
// Setting this value to true will make the component rerender when // Setting this value to true will make the component rerender when
// the "networkStatus" changes, so we are able to know if it is fetching // the "networkStatus" changes, so we are able to know if it is fetching
// more data // more data

18
components/static/Page.tsx
View File

@@ -1,22 +1,10 @@
import ErrorMessage from '../Error';
import parse from 'html-react-parser'; import parse from 'html-react-parser';
import { useQuery } from '@apollo/react-hooks'; import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag'; import ErrorMessage from '../Error';
import { GET_PAGE_QUERY } from '../../graphql/queries';
const QUERY = gql`
query page($slug: String) {
page(slug: $slug)
@rest(type: "Page", path: "{args.slug}", endpoint: "wordpress") {
title
content
modified
featured_image
}
}
`;
export default function Page({ variables }) { export default function Page({ variables }) {
const { loading, error, data } = useQuery(QUERY, { const { loading, error, data } = useQuery(GET_PAGE_QUERY, {
variables, variables,
// Setting this value to true will make the component rerender when // Setting this value to true will make the component rerender when
// the "networkStatus" changes, so we are able to know if it is fetching // the "networkStatus" changes, so we are able to know if it is fetching

18
components/static/Post.tsx
View File

@@ -1,22 +1,10 @@
import ErrorMessage from '../Error';
import parse from 'html-react-parser'; import parse from 'html-react-parser';
import { useQuery } from '@apollo/react-hooks'; import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag'; import ErrorMessage from '../Error';
import { GET_PAGE_QUERY } from '../../graphql/queries';
const QUERY = gql`
query page($slug: String) {
page(slug: $slug)
@rest(type: "Page", path: "{args.slug}", endpoint: "wordpress") {
title
content
modified
featured_image
}
}
`;
export default function Post({ variables }) { export default function Post({ variables }) {
const { loading, error, data } = useQuery(QUERY, { const { loading, error, data } = useQuery(GET_PAGE_QUERY, {
variables, variables,
// Setting this value to true will make the component rerender when // Setting this value to true will make the component rerender when
// the "networkStatus" changes, so we are able to know if it is fetching // the "networkStatus" changes, so we are able to know if it is fetching

149
graphql/queries.ts Normal file
View File

@@ -0,0 +1,149 @@
import gql from 'graphql-tag';
export const GET_ORG_QUERY = gql`
query dataset($id: String) {
dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
result {
organization {
name
title
image_url
}
}
}
}
`;
export const GET_DATAPACKAGE_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
}
}
}
}
`;
export const GET_RESOURCES_QUERY = gql`
query dataset($id: String) {
dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
result {
name
resources {
name
id
title
description
format
size
created
last_modified
url
}
}
}
}
`;
export const SEARCH_QUERY = gql`
query search($q: String, $sort: String, $rows: Int) {
search(q: $q, sort: $sort, rows: $rows)
@rest(type: "Search", path: "package_search?{args}") {
result {
count
results {
name
title
organization {
name
title
description
}
}
}
}
}
`;
export const GET_TOTAL_COUNT_QUERY = gql`
query search($q: String, $sort: String) {
search(q: $q, sort: $sort)
@rest(type: "Search", path: "package_search?{args}") {
result {
count
}
}
}
`;
export const GET_POSTS_QUERY = gql`
query posts {
posts @rest(type: "Posts", path: "", endpoint: "wordpress-posts") {
found
posts
meta
}
}
`;
export const GET_PAGE_QUERY = gql`
query page($slug: String) {
page(slug: $slug)
@rest(type: "Page", path: "{args.slug}", endpoint: "wordpress") {
title
content
excerpt
slug
date
modified
featured_image
}
}
`;
export const GET_DATASET_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
}
}
}
}
`;
export const GET_POST_QUERY = gql`
query post($slug: String) {
post(slug: $slug)
@rest(type: "Post", path: "{args.slug}", endpoint: "wordpress") {
title
content
excerpt
slug
date
modified
}
}
`;

35
pages/[org]/[dataset]/index.tsx
View File

@@ -1,42 +1,15 @@
import { GetServerSideProps } from 'next'; import { GetServerSideProps } from 'next';
import { useQuery } from '@apollo/react-hooks'; import { useQuery } from '@apollo/react-hooks';
import { initializeApollo } from '../../../lib/apolloClient';
import utils from '../../../utils';
import Head from 'next/head'; import Head from 'next/head';
import { initializeApollo } from '../../../lib/apolloClient';
import Nav from '../../../components/home/Nav'; import Nav from '../../../components/home/Nav';
import About from '../../../components/dataset/About'; import About from '../../../components/dataset/About';
import Org from '../../../components/dataset/Org'; import Org from '../../../components/dataset/Org';
import Resources from '../../../components/dataset/Resources'; import Resources from '../../../components/dataset/Resources';
import gql from 'graphql-tag'; import { GET_DATASET_QUERY } from '../../../graphql/queries';
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 }) { function Dataset({ variables }) {
const { data, loading } = useQuery(QUERY, { variables }); const { data, loading } = useQuery(GET_DATASET_QUERY, { variables });
if (loading) return <div>Loading</div>; if (loading) return <div>Loading</div>;
const { result } = data.dataset; const { result } = data.dataset;
@@ -67,7 +40,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
}; };
await apolloClient.query({ await apolloClient.query({
query: QUERY, query: GET_DATASET_QUERY,
variables, variables,
}); });

29
pages/[org]/[dataset]/r/[resource]/index.tsx
View File

@@ -1,35 +1,14 @@
import { GetServerSideProps } from 'next'; import { GetServerSideProps } from 'next';
import gql from 'graphql-tag';
import { useQuery } from '@apollo/react-hooks'; import { useQuery } from '@apollo/react-hooks';
import { initializeApollo } from '../../../../../lib/apolloClient';
import utils from '../../../../../utils';
import Head from 'next/head'; import Head from 'next/head';
import { initializeApollo } from '../../../../../lib/apolloClient';
import Nav from '../../../../../components/home/Nav'; import Nav from '../../../../../components/home/Nav';
import About from '../../../../../components/resource/About'; import About from '../../../../../components/resource/About';
import DataExplorer from '../../../../../components/resource/DataExplorer'; import DataExplorer from '../../../../../components/resource/DataExplorer';
import { GET_RESOURCES_QUERY } from '../../../../../graphql/queries';
const QUERY = gql`
query dataset($id: String) {
dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
result {
resources {
name
id
title
description
format
size
created
last_modified
url
}
}
}
}
`;
function Resource({ variables }) { function Resource({ variables }) {
const { data, loading } = useQuery(QUERY, { variables }); const { data, loading } = useQuery(GET_RESOURCES_QUERY, { variables });
if (loading) return <div>Loading</div>; if (loading) return <div>Loading</div>;
const result = data.dataset.result; const result = data.dataset.result;
@@ -63,7 +42,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
}; };
await apolloClient.query({ await apolloClient.query({
query: QUERY, query: GET_RESOURCES_QUERY,
variables, variables,
}); });

20
pages/blog/[post]/index.tsx
View File

@@ -1,23 +1,9 @@
import { GetServerSideProps } from 'next'; import { GetServerSideProps } from 'next';
import { initializeApollo } from '../../../lib/apolloClient';
import Head from 'next/head'; import Head from 'next/head';
import { initializeApollo } from '../../../lib/apolloClient';
import Nav from '../../../components/home/Nav'; import Nav from '../../../components/home/Nav';
import Post from '../../../components/static/Post'; import Post from '../../../components/static/Post';
import gql from 'graphql-tag'; import { GET_POST_QUERY } from '../../../graphql/queries';
const QUERY = gql`
query post($slug: String) {
post(slug: $slug)
@rest(type: "Post", path: "{args.slug}", endpoint: "wordpress") {
title
content
excerpt
slug
date
modified
}
}
`;
function PostItem({ variables }) { function PostItem({ variables }) {
return ( return (
@@ -42,7 +28,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
const apolloClient = initializeApollo(); const apolloClient = initializeApollo();
await apolloClient.query({ await apolloClient.query({
query: QUERY, query: GET_POST_QUERY,
variables, variables,
}); });

16
pages/blog/index.tsx
View File

@@ -1,19 +1,9 @@
import { GetServerSideProps } from 'next'; import { GetServerSideProps } from 'next';
import { initializeApollo } from '../../lib/apolloClient';
import Head from 'next/head'; import Head from 'next/head';
import { initializeApollo } from '../../lib/apolloClient';
import Nav from '../../components/home/Nav'; import Nav from '../../components/home/Nav';
import List from '../../components/static/List'; import List from '../../components/static/List';
import gql from 'graphql-tag'; import { GET_POSTS_QUERY } from '../../graphql/queries';
const QUERY = gql`
query posts {
posts @rest(type: "Posts", path: "", endpoint: "wordpress-posts") {
found
posts
meta
}
}
`;
function PostList() { function PostList() {
return ( return (
@@ -34,7 +24,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
const apolloClient = initializeApollo(); const apolloClient = initializeApollo();
await apolloClient.query({ await apolloClient.query({
query: QUERY, query: GET_POSTS_QUERY,
}); });
return { return {

7
pages/index.tsx
View File

@@ -1,9 +1,10 @@
import { GetServerSideProps } from 'next'; import { GetServerSideProps } from 'next';
import { initializeApollo } from '../lib/apolloClient';
import Head from 'next/head'; import Head from 'next/head';
import { initializeApollo } from '../lib/apolloClient';
import Nav from '../components/home/Nav'; import Nav from '../components/home/Nav';
import Recent, { QUERY } from '../components/home/Recent'; import Recent from '../components/home/Recent';
import Form from '../components/search/Form'; import Form from '../components/search/Form';
import { SEARCH_QUERY } from '../graphql/queries';
function Home() { function Home() {
return ( return (
@@ -39,7 +40,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
const apolloClient = initializeApollo(); const apolloClient = initializeApollo();
await apolloClient.query({ await apolloClient.query({
query: QUERY, query: SEARCH_QUERY,
variables: { variables: {
sort: 'metadata_created desc', sort: 'metadata_created desc',
rows: 3, rows: 3,

20
pages/p/[page]/index.tsx
View File

@@ -1,23 +1,9 @@
import { GetServerSideProps } from 'next'; import { GetServerSideProps } from 'next';
import { initializeApollo } from '../../../lib/apolloClient';
import Head from 'next/head'; import Head from 'next/head';
import { initializeApollo } from '../../../lib/apolloClient';
import Nav from '../../../components/home/Nav'; import Nav from '../../../components/home/Nav';
import Page from '../../../components/static/Page'; import Page from '../../../components/static/Page';
import gql from 'graphql-tag'; import { GET_PAGE_QUERY } from '../../../graphql/queries';
const QUERY = gql`
query page($slug: String) {
page(slug: $slug)
@rest(type: "Page", path: "{args.slug}", endpoint: "wordpress") {
title
content
excerpt
slug
date
modified
}
}
`;
function PageItem({ variables }) { function PageItem({ variables }) {
return ( return (
@@ -42,7 +28,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
const apolloClient = initializeApollo(); const apolloClient = initializeApollo();
await apolloClient.query({ await apolloClient.query({
query: QUERY, query: GET_PAGE_QUERY,
variables, variables,
}); });

23
pages/search.tsx
View File

@@ -6,26 +6,7 @@ import Nav from '../components/home/Nav';
import Form from '../components/search/Form'; import Form from '../components/search/Form';
import Total from '../components/search/Total'; import Total from '../components/search/Total';
import List from '../components/search/List'; import List from '../components/search/List';
import gql from 'graphql-tag'; import { SEARCH_QUERY } from '../graphql/queries';
const QUERY = gql`
query search($q: String, $sort: String) {
search(q: $q, sort: $sort)
@rest(type: "Search", path: "package_search?{args}") {
result {
count
results {
name
title
organization {
name
title
}
}
}
}
}
`;
function Search({ variables }) { function Search({ variables }) {
return ( return (
@@ -51,7 +32,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
const apolloClient = initializeApollo(); const apolloClient = initializeApollo();
await apolloClient.query({ await apolloClient.query({
query: QUERY, query: SEARCH_QUERY,
variables, variables,
}); });