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

Merge pull request #46 from datopian/enh/41-refactor

Browse Source 
[#41] Refactor Code
This commit is contained in:
tavareshansen
2020-08-04 21:47:02 +08:00
committed by GitHub
parent 9c82897f3b 9908d887ce
commit 23edcc3c9a
22 changed files with 361 additions and 422 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
components/Error.tsx → components/_shared/Error.tsx
View File

38
components/_shared/Table.tsx Normal file
View File

@@ -0,0 +1,38 @@
import React from 'react';
interface TableProps {
columns: Array<any>;
data: Array<any>;
className?: string;
}
const Table: React.FC<TableProps> = ({ columns, data, className }) => {
return (
<table className={`table-auto w-full text-sm text-left my-6 ${className}`}>
<thead>
<tr>
{columns.map(({ key, name }) => (
<th key={key} className="px-4 py-2">
{name}
</th>
))}
</tr>
</thead>
<tbody>
{data.map((item) => (
<tr key={item.id}>
{columns.map(({ key, render }) => (
<td key={key} className="px-4 py-2">
{(render && typeof render === 'function' && render(item)) ||
item[key] ||
''}
</td>
))}
</tr>
))}
</tbody>
</table>
);
};
export default Table;

4
components/_shared/index.ts Normal file
View File

@@ -0,0 +1,4 @@
import Table from './Table';
import ErrorMessage from './Error';
export { Table, ErrorMessage };

80
components/dataset/About.tsx
View File

@@ -1,23 +1,38 @@
import ErrorMessage from '../Error';
import { useQuery } from '@apollo/react-hooks'; import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag'; import { Table, ErrorMessage } from '../_shared';
import { GET_DATAPACKAGE_QUERY } from '../../graphql/queries';
export const GET_DATAPACKAGE_QUERY = gql` const columns = [
query dataset($id: String) { {
dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") { name: 'Files',
result { key: 'files',
name render: ({ resources }) => (resources && resources.length) || 0,
title },
size {
metadata_created name: 'Size',
metadata_modified key: 'size',
resources { },
name {
} name: 'Format',
} key: 'format',
} },
} {
`; name: 'Created',
key: 'metadata_created',
},
{
name: 'Updated',
key: 'metadata_modified',
},
{
name: 'License',
key: 'license',
},
{
name: 'Source',
key: 'source',
},
];
export default function About({ variables }) { export default function About({ variables }) {
const { loading, error, data } = useQuery(GET_DATAPACKAGE_QUERY, { const { loading, error, data } = useQuery(GET_DATAPACKAGE_QUERY, {
@@ -32,32 +47,5 @@ export default function About({ variables }) {
if (loading) return <div>Loading</div>; if (loading) return <div>Loading</div>;
const { result } = data.dataset; const { result } = data.dataset;
return ( return <Table columns={columns} data={[result]} />;
<>
<table className="table-auto w-full text-sm text-left my-6">
<thead>
<tr>
<th className="px-4 py-2">Files</th>
<th className="px-4 py-2">Size</th>
<th className="px-4 py-2">Format</th>
<th className="px-4 py-2">Created</th>
<th className="px-4 py-2">Updated</th>
<th className="px-4 py-2">License</th>
<th className="px-4 py-2">Source</th>
</tr>
</thead>
<tbody>
<tr>
<td className="px-4 py-2">{result.resources.length}</td>
<td className="px-4 py-2">{result.size || 'NA'}</td>
<td className="px-4 py-2"></td>
<td className="px-4 py-2">{result.metadata_created}</td>
<td className="px-4 py-2">{result.metadata_modified}</td>
<td className="px-4 py-2"></td>
<td className="px-4 py-2"></td>
</tr>
</tbody>
</table>
</>
);
} }

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 '../_shared';
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, {

91
components/dataset/Resources.tsx
View File

@@ -1,27 +1,43 @@
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 { Table, ErrorMessage } from '../_shared';
import { GET_RESOURCES_QUERY } from '../../graphql/queries';
export const GET_DATAPACKAGE_QUERY = gql` const columns = [
query dataset($id: String) { {
dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") { name: 'File',
result { key: 'file',
name render: ({ name: resName, title, parentName }) => (
resources { <Link href={`${parentName}/r/${resName}`}>
name <a className="underline">{title || resName}</a>
title </Link>
format ),
created },
last_modified {
} name: 'Format',
} key: 'format',
} },
} {
`; name: 'Created',
key: 'created',
},
{
name: 'Updated',
key: 'last_modified',
},
{
name: 'Link',
key: 'link',
render: ({ name: resName, parentName }) => (
<Link href={`${parentName}/r/${resName}`}>
<a className="underline">Preview</a>
</Link>
),
},
];
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
@@ -37,36 +53,13 @@ export default function Resources({ variables }) {
return ( return (
<> <>
<h3 className="text-xl font-semibold">Data Files</h3> <h3 className="text-xl font-semibold">Data Files</h3>
<table className="table-auto w-full text-sm text-left mb-6"> <Table
<thead> columns={columns}
<tr> data={result.resources.map((resource) => ({
<th className="px-4 py-2">File</th> ...resource,
<th className="px-4 py-2">Format</th> parentName: result.name,
<th className="px-4 py-2">Created</th> }))}
<th className="px-4 py-2">Updated</th> />
<th className="px-4 py-2">Link</th>
</tr>
</thead>
<tbody>
{result.resources.map((resource, index) => (
<tr key={index}>
<td className="px-4 py-2">
<Link href={`${result.name}/r/${resource.name}`}>
<a className="underline">{resource.title || resource.name}</a>
</Link>
</td>
<td className="px-4 py-2">{resource.format}</td>
<td className="px-4 py-2">{resource.created}</td>
<td className="px-4 py-2">{resource.last_modified}</td>
<td className="px-4 py-2">
<Link href={`${result.name}/r/${resource.name}`}>
<a className="underline">Preview</a>
</Link>
</td>
</tr>
))}
</tbody>
</table>
</> </>
); );
} }

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 '../_shared';
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,

107
components/resource/About.tsx
View File

@@ -1,30 +1,53 @@
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 { Table, ErrorMessage } from '../_shared';
import { GET_RESOURCES_QUERY } from '../../graphql/queries';
const QUERY = gql` const columns = [
query dataset($id: String) { {
dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") { name: 'Name',
result { key: 'name',
resources { render: ({ name, id }) => name || id,
name },
id {
title name: 'Title',
description key: 'title',
format },
size {
created name: 'Description',
last_modified key: 'description',
url },
} {
} name: 'Format',
} key: 'format',
} },
`; {
name: 'Size',
key: 'size',
},
{
name: 'Created',
key: 'created',
},
{
name: 'Updated',
key: 'last_modified',
},
{
name: 'Download',
key: 'download',
render: ({ url, format }) => (
<a
href={url}
className="bg-white hover:bg-gray-200 border text-black font-semibold py-2 px-4 rounded"
>
{format}
</a>
),
},
];
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
@@ -39,41 +62,5 @@ export default function About({ variables }) {
const resource = result.resources.find( const resource = result.resources.find(
(item) => item.name === variables.resource (item) => item.name === variables.resource
); );
return ( return <Table columns={columns} data={[resource]} />;
<>
<table className="table-auto w-full text-sm text-left my-6">
<thead>
<tr>
<th className="px-4 py-2">Name</th>
<th className="px-4 py-2">Title</th>
<th className="px-4 py-2">Description</th>
<th className="px-4 py-2">Format</th>
<th className="px-4 py-2">Size</th>
<th className="px-4 py-2">Created</th>
<th className="px-4 py-2">Updated</th>
<th className="px-4 py-2">Download</th>
</tr>
</thead>
<tbody>
<tr>
<td className="px-4 py-2">{resource.name || resource.id}</td>
<td className="px-4 py-2">{resource.title || ''}</td>
<td className="px-4 py-2">{resource.description || ''}</td>
<td className="px-4 py-2">{resource.format}</td>
<td className="px-4 py-2">{resource.size}</td>
<td className="px-4 py-2">{resource.created}</td>
<td className="px-4 py-2">{resource.last_modified || ''}</td>
<td className="px-4 py-2">
<a
href={resource.url}
className="bg-white hover:bg-gray-200 border text-black font-semibold py-2 px-4 rounded"
>
{resource.format}
</a>
</td>
</tr>
</tbody>
</table>
</>
);
} }

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 '../_shared';
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

26
components/search/List.tsx
View File

@@ -1,28 +1,10 @@
import Item from './Item';
import ErrorMessage from '../Error';
import { useQuery } from '@apollo/react-hooks'; import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag'; import Item from './Item';
import { ErrorMessage } from '../_shared';
const QUERY = gql` import { SEARCH_QUERY } from '../../graphql/queries';
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 '../_shared';
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 '../_shared';
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 '../_shared';
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 '../_shared';
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,
}); });