Upgrade to Apollo Server 4 (#25)

* Start of branch to complete front-end pagination

* Start of branch to migrate to Apollo Server 4.

* Fix finicky stuff and adjust test for new mock data.

* Not sure if this is necessary, but adding key field to mock data.

* Drop apollo codegen and move to Node 18 in both client and server Docker images.

* Node 18 in workflows too.

* Need yarn.lock for Docker build.

* Remove deprecated apollo cli dependency and commit the CID, it's ok to do so.

* Update some minor dependencies.

.github/workflows/wf-client-tests.yaml

@@ -13,7 +13,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [18]
 
     steps:
     - name: Checkout code

.github/workflows/wf-publish-stories.yaml

@@ -18,7 +18,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [18]
 
     env:
       CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/wf-server-tests.yaml

@@ -13,7 +13,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [18]
 
     steps:
     - name: Checkout code

.gitignore

@@ -10,7 +10,6 @@ client/.direnv
 .idea
 client/storybook-static
 client/.storybook/public
-client/src/googlecid.ts
 env.sh
 node_modules
 schema.graphql

client/.storybook/main.js

@@ -22,7 +22,7 @@ module.exports = {
   'webpackFinal': (config) => {
     config.resolve.fallback = {
       'constants': require.resolve('constants-browserify'),
-      'fs': false,
+      'fs': require.resolve('stream-http'),
       'http': require.resolve('stream-http'),
       'https': require.resolve('https-browserify'),
       'path': require.resolve('path-browserify'),

client/Dockerfile

@@ -1,7 +1,8 @@
-FROM node:16
+FROM node:18
 
 WORKDIR /app
 COPY package.json .
+COPY yarn.lock .
 RUN yarn install
 RUN mkdir src
 COPY src ./src/

client/package.json

@@ -2,19 +2,17 @@
   "name": "blogql-client",
   "version": "1.0.0",
   "description": "BlogQL web interface",
-  "main": "index.js",
+  "main": "src/index.js",
   "author": {
-    "name": "Dave Johnson"
+    "name": "Dave Johnson",
+    "email": "[email protected]"
   },
   "license": "Apache-2.0",
-  "private": true,
   "scripts": {
-    "start": "webpack-dev-server --mode development",
+    "start": "yarn build && webpack-dev-server --mode development",
     "compile": "tsc --noEmit false",
     "test": "jest --detectOpenHandles",
-    "build": "yarn codegen && yarn gentypes && yarn compile && webpack",
-    "gentypes": "npx apollo codegen:generate --includes=src/graphql/*.ts --localSchemaFile=schema.graphql --target=typescript --tagName=gql",
-    "gentypes-against-server": "npx apollo codegen:generate --excludes=src/*/*.ts -endpoint=http://localhost:4000/graphql --target=typescript --tagName=gql",
+    "build": "yarn codegen && yarn compile && webpack",
     "clean": "rm -rf node_modules build src/*.js src/*/*.js src/*.jsx src/*/*.jsx __generated__/* src/graphql/__generated__/* schema.graphql",
     "build-storybook": "build-storybook",
     "storybook": "start-storybook -p 6006",
@@ -24,7 +22,7 @@
   "dependencies": {
     "@ant-design/cssinjs": "^1.6.1",
     "@ant-design/icons": "^5.0.1",
-    "@apollo/client": "^3.7.4",
+    "@apollo/client": "^3.8.7",
     "@fortawesome/fontawesome-free": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
@@ -48,10 +46,12 @@
     "@babel/preset-typescript": "^7.18.6",
     "@faker-js/faker": "^8.0.2",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
-    "@graphql-codegen/cli": "^3.3.0",
+    "@graphql-codegen/cli": "^5.0.0",
     "@graphql-codegen/client-preset": "^3.0.0",
     "@graphql-codegen/introspection": "3.0.1",
-    "@graphql-codegen/typescript": "^3.0.3",
+    "@graphql-codegen/typescript": "^4.0.1",
+    "@graphql-codegen/typescript-operations": "^4.0.1",
+    "@graphql-codegen/typescript-react-apollo": "^4.1.0",
     "@graphql-codegen/typescript-resolvers": "^3.2.0",
     "@graphql-typed-document-node/core": "^3.2.0",
     "@storybook/addon-actions": "^6.5.16",
@@ -72,8 +72,7 @@
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.2",
     "@types/react-router-dom": "^5.1.7",
-    "@types/uuid": "^9.0.3",
-    "apollo": "^2.34.0",
+    "@types/uuid": "^9.0.6",
     "babel-loader": "^8.3.0",
     "browserify-zlib": "^0.2.0",
     "cross-fetch": "^3.1.5",
@@ -85,7 +84,7 @@
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^2.7.2",
+    "mini-css-extract-plugin": "^2.7.6",
     "msw": "^0.49.2",
     "msw-storybook-addon": "^1.8.0",
     "storybook-addon-react-router-v6": "^0.3.4",

client/src/blogs/BlogsList.tsx

@@ -5,32 +5,45 @@
 
 import {useQuery} from '@apollo/client/react/hooks/useQuery';
 import {BLOGS_QUERY} from '../graphql/queries';
-import React from 'react';
+import React, {useState} from 'react';
 import {Heading} from "../common/Heading";
 import {Table} from "antd";
 import {BlogEdge} from "../gql/graphql";
 import {Link} from "react-router-dom";
 
 
 export function BlogsList() {
-    const { loading, error, data } = useQuery(BLOGS_QUERY);
+    const [fixedTop, setFixedTop] = useState(false);
+    const pageSize = 10;
+    const { loading, error, data } = useQuery(BLOGS_QUERY, { variables: { first: pageSize }} );
     if (loading) { return (<p>Loading...</p>); }
     if (error) { return (<p>error!</p>); }
     if (!data) { return (<p>no data!</p>); }
     const columns = [
-        { title: 'Name', dataIndex: 'name', key: 'id',
+        { title: 'Name', dataIndex: 'name', key: 'name',
             render: (_: string, edge: BlogEdge) => <Link to={`/blogs/${edge.node.handle}`}>{edge.node.name}</Link>
         },
-        { title: 'Handle', dataIndex: 'handle', key: 'id',
+        { title: 'Handle', dataIndex: 'handle', key: 'handle',
             render: (_: string, edge: BlogEdge) => <Link to={`/blogs/${edge.node.handle}`}>{edge.node.handle}</Link>
         },
     ];
+
     const dataSource = data.blogs?.edges;
     return (
         <>
             <Heading title='Welcome to BlogQL'
                      heading='This is where you can find a list of all the blogs in the system.' />
-            <Table dataSource={dataSource} columns={columns} />
+            <Table
+                rowKey='id'
+                loading={loading}
+                dataSource={dataSource}
+                columns={columns}
+                pagination={{
+                    total: data.blogs?.pageInfo.totalCount,
+                    pageSize: pageSize,
+                    onChange: e => {
+                }
+            }} />
         </>
     );
 }

client/src/entries/Entries.tsx

@@ -8,7 +8,7 @@ import {Link, useParams} from 'react-router-dom';
 import {useQuery} from '@apollo/client/react/hooks/useQuery';
 import {ENTRIES_QUERY} from '../graphql/queries';
 import {Heading} from "../common/Heading";
-import {Entry, EntryEdge} from "../gql/graphql";
+import {EntryEdge} from "../gql/graphql";
 import {Avatar, List, Space, Tooltip} from "antd";
 import {stripHtml} from "string-strip-html";
 import {RelativeDateTime, SimpleDateTime} from "../common/DateTime";
@@ -20,7 +20,7 @@ function Entries() {
     const userContext: AuthContext = useContext(authContext);
     const {handle} = useParams<{ handle: string }>(); // get handle param from router route
     const {loading, error, data} = useQuery(ENTRIES_QUERY, {
-        variables: {handle} // TODO: pagination!
+        variables: { handle } // TODO: pagination!
     });
     if (loading) { return (<p>Loading...</p>); }
     if (error) { return (<p>error!</p>); }

client/src/googlecid.ts

@@ -0,0 +1 @@
+export const GOOGLE_SIGNON_CID= "1075139484035-artm82biuaj81lcjlru9j0ojhlvns4vi.apps.googleusercontent.com"