[apollo][l]: initial commit for setting up Apollo.

components/search/List.tsx

@@ -1,9 +1,34 @@
 import Item from './Item';
+import { useQuery } from '@apollo/react-hooks';
+import gql from 'graphql-tag';
+
+export const DEFAULT_SEARCH_QUERY = gql`
+  search($query: SearchQuery!) {
+    result {
+      results
+    }
+  }
+`;
+
+export default function List() {
+  const { loading, error, data, fetchMore, networkStatus } = useQuery(
+    DEFAULT_SEARCH_QUERY,
+    {
+      // Setting this value to true will make the component rerender when
+      // the "networkStatus" changes, so we are able to know if it is fetching
+      // more data
+      notifyOnNetworkStatusChange: true,
+    }
+  );
+
+  if (error) return <ErrorMessage message="Error loading posts." />;
+  if (loading) return <div>Loading</div>;
+
+  const { result } = data;
 
-export default function List({ datapackages }) {
   return (
     <ul>
-      {datapackages.map((datapackage, index) => (
+      {result.map((datapackage, index) => (
         <Item datapackage={datapackage} key={index} />
       ))}
     </ul>

lib/apolloClient.js

@@ -0,0 +1,175 @@
+import { useMemo } from 'react';
+import { ApolloClient } from 'apollo-client';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+import { SchemaLink } from 'apollo-link-schema';
+import { makeExecutableSchema } from 'graphql-tools';
+
+let apolloClient;
+
+const typeDefs = `
+  type Query {
+    search(query: SearchQuery!): Response!
+  }
+
+  type SearchQuery {
+    q: String!
+    fq: String!
+    sort: String!
+    rows: Int!
+    start: Int!
+    facet: String!
+    include_drafts: Boolean!
+    include_private: Boolean!
+    use_default_schema: Boolean!
+  }
+
+  type Response {
+    success: Boolean!
+    result: Result!
+  }
+
+  type Result {
+    count: Int!
+    sort: String!
+    facets: String!
+    search_facets: String!
+    results: [Package!]!
+  }
+
+  type Package {
+    name: String!
+    title: String!
+    notes: String!
+    resources: [Resource!]!
+    organization: Organization!
+    metadata_created: String!
+    metadata_modified: String!
+  }
+
+  type Resource {
+    name: String!
+    id: String!
+    title: String!
+    format: String!
+    created: String!
+    last_modified: String!
+    datastore_active: Boolean!
+    url: String!
+  }
+
+  type Organization {
+    name: String!
+    title: String!
+    description: String!
+    created: String!
+    image_url: String!
+  }
+`;
+
+const resolvers = {
+  Query: {
+    search: (parent, { query }) => ({
+      success: true,
+      result: {
+        count: 2,
+        sort: 'score desc, metadata_modified desc',
+        facets: {},
+        results: [
+          {
+            name: 'gdp',
+            title: 'Country, Regional and World GDP (Gross Domestic Product)',
+            notes:
+              'Country, regional and world GDP in current US Dollars ($). Regional means collections of countries e.g. Europe & Central Asia. Data is sourced from the World Bank and turned into a standard normalized CSV.',
+            resources: [
+              {
+                name: 'gdp',
+                id: 'gdp',
+                title: 'GDP data',
+                format: 'csv',
+                created: '2019-03-07T12:00:36.273495',
+                last_modified: '2020-05-07T12:00:36.273495',
+                datastore_active: false,
+                url: 'http://mock.filestore/gdp.csv',
+              },
+            ],
+            organization: {
+              title: 'World Bank',
+              name: 'world-bank',
+              description:
+                'The World Bank is an international financial institution that provides loans and grants to the governments of poorer countries for the purpose of pursuing capital projects.',
+              created: '2019-03-07T11:51:13.758844',
+              image_url:
+                'https://github.com/datahq/frontend/raw/master/public/img/avatars/world-bank.jpg',
+            },
+            metadata_created: '2019-03-07T11:56:19.696257',
+            metadata_modified: '2019-03-07T12:03:58.817280',
+          },
+          {
+            name: 'population',
+            title: 'World population data',
+            notes:
+              'Population figures for countries, regions (e.g. Asia) and the world. Data comes originally from World Bank and has been converted into standard CSV.',
+            resources: [
+              {
+                name: 'population',
+                id: 'population',
+                title: 'Population data',
+                format: 'csv',
+                created: '2019-03-07T12:00:36.273495',
+                last_modified: '2020-05-07T12:00:36.273495',
+                datastore_active: true,
+                url: 'http://mock.filestore/population.csv',
+              },
+            ],
+            organization: {
+              title: 'World Bank',
+              name: 'world-bank',
+              description:
+                'The World Bank is an international financial institution that provides loans and grants to the governments of poorer countries for the purpose of pursuing capital projects.',
+              created: '2019-03-07T11:51:13.758844',
+              image_url:
+                'https://github.com/datahq/frontend/raw/master/public/img/avatars/world-bank.jpg',
+            },
+          },
+        ],
+        search_facets: {},
+      },
+    }),
+  },
+};
+
+const executableSchema = makeExecutableSchema({
+  typeDefs,
+  resolvers,
+});
+
+const link = new SchemaLink({ schema: executableSchema });
+
+function createApolloClient() {
+  return new ApolloClient({
+    ssrMode: typeof window === 'undefined',
+    link,
+    cache: new InMemoryCache(),
+  });
+}
+
+export function initializeApollo(initialState = null) {
+  const _apolloClient = apolloClient ?? createApolloClient();
+
+  // If your page has Next.js data fetching methods that use Apollo Client, the initial state
+  // gets hydrated here
+  if (initialState) {
+    _apolloClient.cache.restore(initialState);
+  }
+  // For SSG and SSR always create a new Apollo Client
+  if (typeof window === 'undefined') return _apolloClient;
+  // Create the Apollo Client once in the client
+  if (!apolloClient) apolloClient = _apolloClient;
+
+  return _apolloClient;
+}
+
+export function useApollo(initialState) {
+  const store = useMemo(() => initializeApollo(initialState), [initialState]);
+  return store;
+}

package.json

@@ -13,7 +13,15 @@
     "pre-commit": "echo 'formating your changes.....' && prettier --single-quote --write"
   },
   "dependencies": {
+    "@apollo/react-hooks": "^3.1.5",
+    "apollo-cache-inmemory": "^1.6.6",
+    "apollo-client": "^2.6.10",
+    "apollo-link-http": "^1.5.17",
+    "apollo-link-schema": "^1.2.5",
     "bytes": "^3.1.0",
+    "graphql": "^15.1.0",
+    "graphql-tag": "^2.10.3",
+    "graphql-tools": "^6.0.10",
     "markdown-it": "^11.0.0",
     "next": "9.4.2",
     "querystring": "^0.2.0",
@@ -27,6 +35,7 @@
     "@types/jest": "^25.2.3",
     "@types/react": "^16.9.35",
     "babel-jest": "^26.0.1",
+    "babel-plugin-graphql-tag": "^2.5.0",
     "dotenv": "^8.2.0",
     "husky": ">=4",
     "jest": "^26.0.1",

pages/_app.tsx

@@ -1,13 +1,22 @@
 /* istanbul ignore file */
 import '../styles/index.css';
 
+import { ApolloProvider } from '@apollo/react-hooks';
+import { useApollo } from '../lib/apolloClient';
+
 // Setup mocks
-if (process.env.NODE_ENV === 'development') {
-  const mocks = require('../mocks');
-  mocks.initMocks();
-  console.warn('You have activated the mocks.');
-}
+// if (process.env.NODE_ENV === 'development') {
+//   const mocks = require('../mocks');
+//   mocks.initMocks();
+//   console.warn('You have activated the mocks.');
+// }
 
 export default function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />;
+  const apolloClient = useApollo(pageProps.initialApolloState);
+
+  return (
+    <ApolloProvider client={apolloClient}>
+      <Component {...pageProps} />
+    </ApolloProvider>
+  );
 }

pages/search.tsx

@@ -7,7 +7,8 @@ import Nav from '../components/home/Nav';
 import Input from '../components/search/Input';
 import Total from '../components/search/Total';
 import Sort from '../components/search/Sort';
-import List from '../components/search/List';
+import List, { DEFAULT_SEARCH_QUERY } from '../components/search/List';
+import { initializeApollo } from '../lib/apolloClient';
 
 function Search({ ckanResult, datapackages, query }) {
   return (
@@ -28,19 +29,32 @@ function Search({ ckanResult, datapackages, query }) {
 }
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
-  const query = context.query || {};
-  const ckanQuery = querystring.stringify(
-    utils.convertToCkanSearchQuery(query)
-  );
-  const res = await fetch(
-    `${config.get('DMS')}/api/3/action/package_search?${ckanQuery}`
-  );
-  const ckanResult = (await res.json()).result;
-  const datapackages = ckanResult.results.map((item) =>
-    utils.ckanToDataPackage(item)
-  );
+  const apolloClient = initializeApollo();
 
-  return { props: { ckanResult, datapackages, query } };
+  await apolloClient.query({
+    query: DEFAULT_SEARCH_QUERY,
+  });
+
+  return {
+    props: {
+      initialApolloState: apolloClient.cache.extract(),
+    },
+    unstable_revalidate: 1,
+  };
+  //
+  // const query = context.query || {};
+  // const ckanQuery = querystring.stringify(
+  //   utils.convertToCkanSearchQuery(query)
+  // );
+  // const res = await fetch(
+  //   `${config.get('DMS')}/api/3/action/package_search?${ckanQuery}`
+  // );
+  // const ckanResult = (await res.json()).result;
+  // const datapackages = ckanResult.results.map((item) =>
+  //   utils.ckanToDataPackage(item)
+  // );
+  //
+  // return { props: { ckanResult, datapackages, query } };
 };
 
 export default Search;