further migrations

Author: gilgardosh

examples/graphql-file-upload-example/frontend/package.json

@@ -3,17 +3,25 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@apollo/client": "3.7.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "14.4.3",
-    "@apollo/client": "3.7.0",
-    "apollo-upload-client": "17.0.0",
+    "apollo-upload-client": "^17.0.0",
     "graphql": "16.6.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-scripts": "5.0.1",
     "web-vitals": "3.0.3"
   },
+  "devDependencies": {
+    "@types/apollo-upload-client": "17.0.1",
+    "@types/jest": "27.5.2",
+    "@types/node": "16.11.65",
+    "@types/react": "18.0.21",
+    "@types/react-dom": "18.0.6",
+    "typescript": "4.8.4"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
@@ -31,5 +39,11 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
   }
 }

examples/graphql-file-upload-example/frontend/src/App.js renamed to examples/graphql-file-upload-example/frontend/src/App.tsx

@@ -1,16 +1,25 @@
 import { useMutation, useQuery } from '@apollo/client';
 import { GET_FILES, DELETE_FILE } from './queries';
 
+export type FileType = {
+  filename: string;
+  thumbnailImage: any;
+};
+
+export type FilesType = {
+  files: FileType[];
+};
+
 export default function Files() {
-  const { loading, error, data } = useQuery(GET_FILES);
+  const { loading, error, data } = useQuery<FilesType>(GET_FILES);
   const [deleteFile] = useMutation(DELETE_FILE);
 
-  if (loading) return 'Loading...';
-  if (error) return `Error! ${error.message}`;
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>{`Error! ${error.message}`}</p>;
 
   return (
     <ul>
-      {data?.files.map(({ filename, thumbnailImage }) => {
+      {data?.files.map(({ filename, thumbnailImage }: { filename: any; thumbnailImage: any }) => {
         const extension = filename.split('.').pop();
         const uri = `data:image/${extension};base64,${thumbnailImage}`;
         return (
@@ -23,14 +32,14 @@ export default function Files() {
                     filename,
                   },
                   update(cache) {
-                    const data = cache.readQuery({
+                    const data = cache.readQuery<FilesType>({
                       query: GET_FILES,
                     });
                     cache.writeQuery({
                       query: GET_FILES,
                       data: {
                         ...data,
-                        files: data.files.filter(image => image.filename !== filename),
+                        files: data?.files.filter(image => image.filename !== filename),
                       },
                     });
                   },

examples/graphql-file-upload-example/frontend/src/Files.js renamed to examples/graphql-file-upload-example/frontend/src/Files.tsx

@@ -1,13 +1,14 @@
 import { useRef, useState } from 'react';
 import { useMutation } from '@apollo/client';
 import { GET_FILES, UPLOAD_FILE } from './queries';
+import { FileType, FilesType } from './Files';
 
 export default function UploadFile() {
   const [uploadFile] = useMutation(UPLOAD_FILE);
-  const [file, setFile] = useState();
-  const inputRef = useRef(null);
+  const [file, setFile] = useState<FileType>();
+  const inputRef = useRef<FilesType & HTMLInputElement>(null);
   const onSelectFile = () => {
-    setFile(inputRef.current.files[0]);
+    setFile(inputRef.current!.files[0]);
   };
   return (
     <form
@@ -18,7 +19,7 @@ export default function UploadFile() {
             upload: file,
           },
           update(cache, { data: newImage }) {
-            const data = cache.readQuery({
+            const data = cache.readQuery<FilesType>({
               query: GET_FILES,
             });
             const existingFiles = data?.files || [];
@@ -31,7 +32,7 @@ export default function UploadFile() {
             });
           },
         });
-        inputRef.current.value = null;
+        inputRef.current!.value = '';
       }}
     >
       <input type="file" onBlur={onSelectFile} ref={inputRef} />

examples/graphql-file-upload-example/frontend/src/UploadFile.js renamed to examples/graphql-file-upload-example/frontend/src/UploadFile.tsx

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

examples/graphql-file-upload-example/frontend/src/apolloClient.js renamed to examples/graphql-file-upload-example/frontend/src/apolloClient.tsx

@@ -1,4 +1,6 @@
-const reportWebVitals = onPerfEntry => {
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);

examples/graphql-file-upload-example/frontend/src/index.js renamed to examples/graphql-file-upload-example/frontend/src/index.tsx

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}

examples/graphql-file-upload-example/frontend/src/queries.js renamed to examples/graphql-file-upload-example/frontend/src/queries.tsx

@@ -1,4 +1,4 @@
-import { startServer } from './server';
+import startServer from './server';
 
 startServer().then(() => {
   console.info(`ResizeImage GraphQL API listening on 3002`);

examples/graphql-file-upload-example/frontend/src/react-app-env.d.ts

@@ -2,7 +2,7 @@ import { createYoga, createSchema } from 'graphql-yoga';
 import { createServer } from 'http';
 import sharp from 'sharp';
 
-export function startServer() {
+export default function startServer() {
   const yoga = createYoga({
     schema: createSchema({
       typeDefs: /* GraphQL */ `

examples/graphql-file-upload-example/frontend/src/reportWebVitals.js renamed to examples/graphql-file-upload-example/frontend/src/reportWebVitals.ts

@@ -1,9 +1,9 @@
-const startUploadFilesServer = require('../upload-files/server');
-const startResizeImageServer = require('../resize-image/server');
-const { File } = require('@whatwg-node/fetch');
-const { findAndParseConfig } = require('@graphql-mesh/cli');
-const { join } = require('path');
-const { getMesh } = require('@graphql-mesh/runtime');
+import startUploadFilesServer from '../upload-files/server';
+import startResizeImageServer from '../resize-image/server';
+import { File } from '@whatwg-node/fetch';
+import { findAndParseConfig } from '@graphql-mesh/cli';
+import { join } from 'path';
+import { getMesh } from '@graphql-mesh/runtime';
 
 describe('Upload Example', () => {
   let stopUploadFilesServer;

examples/graphql-file-upload-example/frontend/src/setupTests.js renamed to examples/graphql-file-upload-example/frontend/src/setupTests.ts

@@ -1,4 +1,4 @@
-import { startServer } from './server';
+import startServer from './server';
 
 startServer().then(() => {
   console.info(`UploadFiles GraphQL API listening on 3001`);

examples/graphql-file-upload-example/frontend/tsconfig.json

@@ -10,7 +10,7 @@ if (!existsSync(FILES_DIR)) {
   mkdirSync(FILES_DIR);
 }
 
-export function startServer() {
+export default function startServer() {
   const yoga = createYoga({
     schema: createSchema({
       typeDefs: /* GraphQL */ `

examples/graphql-file-upload-example/resize-image/index.ts

@@ -7,7 +7,7 @@
   "private": true,
   "scripts": {
     "prestart": "mesh build --fileType js",
-    "start": "node index.js"
+    "start": "ts-node index.ts"
   },
   "dependencies": {
     "@graphql-mesh/cli": "0.78.33",
@@ -16,6 +16,8 @@
     "graphql": "16.6.0"
   },
   "devDependencies": {
-    "jest": "29.2.0"
+    "jest": "29.2.0",
+    "ts-node": "10.9.1",
+    "typescript": "4.8.4"
   }
 }

examples/graphql-file-upload-example/resize-image/server.ts

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es6",
+    "rootDir": "./",
+    "esModuleInterop": true
+  }
+}

examples/graphql-file-upload-example/test/graphql-file-upload-example.test.js renamed to examples/graphql-file-upload-example/test/graphql-file-upload-example.test.ts

@@ -4,7 +4,7 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "download-fhir-schema": "node scripts/download-fhir-schema.js",
+    "download-fhir-schema": "ts-node scripts/download-fhir-schema.ts",
     "build": "mesh build",
     "start": "mesh dev",
     "start:prod": "mesh start"
@@ -14,5 +14,10 @@
     "@graphql-mesh/json-schema": "0.35.25",
     "graphql": "16.6.0",
     "unzip-stream": "0.3.1"
+  },
+  "devDependencies": {
+    "@types/unzip-stream": "0.3.1",
+    "ts-node": "10.9.1",
+    "typescript": "4.8.4"
   }
 }

examples/graphql-file-upload-example/upload-files/index.ts

@@ -1,14 +1,14 @@
-const fetch = require('node-fetch');
-const { createWriteStream, existsSync } = require('fs');
-const { join } = require('path');
-const unzip = require('unzip-stream');
+import fetch from 'node-fetch';
+import { createWriteStream } from 'fs';
+import { join } from 'path';
+import unzip, { Entry } from 'unzip-stream';
 
 async function downloadFhirSchema() {
   const res = await fetch('https://www.hl7.org/fhir/fhir.schema.json.zip');
   await new Promise((resolve, reject) => {
     res.body
       .pipe(unzip.Parse())
-      .on('entry', entry => entry.pipe(createWriteStream(join(__dirname, `../${entry.path}`))))
+      .on('entry', (entry: Entry) => entry.pipe(createWriteStream(join(__dirname, `../${entry.path}`))))
       .on('finish', resolve);
     res.body.on('error', reject);
   });

examples/graphql-file-upload-example/upload-files/server.ts

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es6",
+    "rootDir": "./",
+    "esModuleInterop": true
+  }
+}

examples/hello-world-esm/index.js renamed to examples/hello-world-esm/index.ts

@@ -1,6 +1,6 @@
-const express = require('express');
-const { fetch } = require('@whatwg-node/fetch');
-const bodyParser = require('body-parser');
+import express from 'express';
+import { fetch } from '@whatwg-node/fetch';
+import bodyParser from 'body-parser';
 
 const app = express();
 app.use(bodyParser.json());

examples/hello-world-esm/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "start": "concurrently \"yarn start:api\" \"yarn start:mesh\"",
-    "start:api": "node api.js",
+    "start:api": "ts-node api.ts",
     "start:mesh": "mesh dev"
   },
   "dependencies": {
@@ -17,6 +17,8 @@
     "@whatwg-node/fetch": "0.4.7"
   },
   "devDependencies": {
-    "concurrently": "7.4.0"
+    "concurrently": "7.4.0",
+    "ts-node": "10.9.1",
+    "typescript": "4.8.4"
   }
 }

examples/hello-world-esm/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es6",
+    "rootDir": "./",
+    "esModuleInterop": true
+  }
+}