refactor: Rewrite in TypeScript. (#39)

BREAKING CHANGE: `useApolloClient` throws if the client is not available in the context instead of returning null

Author: avocadowastaken

.babelrc.js

@@ -1,11 +1,13 @@
 module.exports = {
   presets: [
     '@babel/preset-react',
+    '@babel/preset-typescript',
     [
       '@babel/preset-env',
       {
         loose: true,
         modules: process.env.ES_MODULES ? false : 'commonjs',
+        targets: process.env.NODE_ENV !== 'test' ? undefined : { node: true },
       },
     ],
   ],

.circleci/config.yml

@@ -28,9 +28,12 @@ jobs:
       - run:
           name: Check prettier
           command: yarn format-check
+      - run:
+          name: Check typings
+          command: yarn typings-check
       - run:
           name: Lint code
-          command: yarn lint-ci
+          command: yarn lint
       - run:
           name: test
           command: yarn test

.eslintignore

@@ -4,19 +4,20 @@
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
+  "typings": "lib/index.d.ts",
   "files": [
     "es",
-    "lib",
-    "src/index.d.ts"
+    "lib"
   ],
   "scripts": {
-    "build:cjs": "rimraf lib && babel src --ignore '**/__tests__' --ignore '**/__testutils__' -d lib",
-    "build:es": "rimraf es && cross-env ES_MODULES=true babel src --ignore '**/__tests__' --ignore '**/__testutils__' -d es",
-    "build": "npm run build:cjs && npm run build:es",
+    "build:cjs": "rimraf lib && babel src --extensions '.ts' --extensions '.tsx' --ignore '**/__tests__' --ignore '**/__testutils__' -d lib",
+    "build:es": "rimraf es && cross-env ES_MODULES=true babel src --extensions '.ts' --extensions '.tsx' --ignore '**/__tests__' --ignore '**/__testutils__' -d es",
+    "build:typings": "tsc -p tsconfig.typings.json",
+    "build": "npm run build:cjs && npm run build:es && npm run build:typings",
+    "typings-check": "tsc --noEmit",
     "format-check": "prettier --list-different \"**/*.{js,ts,tsx}\"",
     "format": "prettier --write \"**/*.{js,ts,tsx}\"",
-    "lint-ci": "eslint --max-warnings=0 .",
-    "lint": "eslint .",
+    "lint": "tslint --project . \"src/**/*.{ts,tsx}\"",
     "prepublishOnly": "npm run build",
     "test": "jest"
   },
@@ -27,13 +28,26 @@
     "type": "git",
     "url": "https://github.com/trojanowski/react-apollo-hooks.git"
   },
-  "types": "./src/index.d.ts",
   "jest": {
-    "setupTestFrameworkScriptFile": "./src/__testutils__/setupTests.js",
+    "setupTestFrameworkScriptFile": "./src/__testutils__/setupTests.ts",
+    "transform": {
+      "^.+\\.(ts|tsx)$": "babel-jest"
+    },
+    "testMatch": [
+      "**/__tests__/**/*-test.ts?(x)"
+    ],
     "testPathIgnorePatterns": [
       "/<rootDir>/es/",
       "/<rootDir>/lib/",
       "/node_modules/"
+    ],
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "json",
+      "jsx",
+      "node"
     ]
   },
   "husky": {
@@ -42,12 +56,14 @@
     }
   },
   "lint-staged": {
-    "**/*.{js,ts,tsx}": [
-      "prettier --single-quote --write",
+    "**/*.js": [
+      "prettier --write",
       "git add"
     ],
-    "**/*.js": [
-      "eslint --max-warnings=0"
+    "**/*.{ts,tsx}": [
+      "tslint --fix --project .",
+      "prettier --write",
+      "git add"
     ]
   },
   "peerDependencies": {
@@ -64,24 +80,18 @@
     "@babel/core": "^7.1.5",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.1.0",
     "@types/graphql": "^14.0.3",
-    "@types/react": "^16.4.18",
+    "@types/jest": "^23.3.10",
+    "@types/lodash": "^4.14.119",
+    "@types/react": "^16.7.17",
     "apollo-cache-inmemory": "^1.3.11",
     "apollo-client": "^2.4.7",
     "apollo-link": "^1.2.4",
     "apollo-link-mock": "^1.0.1",
-    "babel-core": "^7.0.0-bridge",
-    "babel-eslint": "9.x",
+    "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^23.6.0",
     "cross-env": "^5.2.0",
-    "eslint": "5.x",
-    "eslint-config-prettier": "^3.3.0",
-    "eslint-config-react-app": "^3.0.5",
-    "eslint-plugin-flowtype": "2.x",
-    "eslint-plugin-import": "2.x",
-    "eslint-plugin-jsx-a11y": "6.x",
-    "eslint-plugin-react": "7.x",
-    "eslint-plugin-react-hooks": "^0.0.0",
     "graphql": "^14.0.2",
     "graphql-tag": "^2.10.0",
     "husky": "^1.2.0",
@@ -94,6 +104,9 @@
     "react-testing-library": "^5.3.1",
     "rimraf": "^2.6.2",
     "standard-version": "^4.4.0",
-    "typescript": "^3.1.3"
+    "tslint": "^5.12.0",
+    "tslint-config-prettier": "^1.17.0",
+    "tslint-react": "^3.6.0",
+    "typescript": "^3.2.2"
   }
 }

.eslintrc.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { cleanup, render } from 'react-testing-library';
 
-import createClient from '../__testutils__/createClient';
 import { ApolloProvider, useApolloClient } from '..';
+import createClient from '../__testutils__/createClient';
 
 afterEach(cleanup);
 

package.json

@@ -10,6 +10,7 @@ import {
 import { ApolloProvider, useMutation, useQuery } from '..';
 import createClient from '../__testutils__/createClient';
 import { SAMPLE_TASKS } from '../__testutils__/data';
+import noop from '../__testutils__/noop';
 import waitForNextTick from '../__testutils__/waitForNextTick';
 
 const TASKS_MOCKS = [
@@ -29,8 +30,8 @@ const TASKS_MOCKS = [
     },
     result: {
       data: {
-        tasks: [...SAMPLE_TASKS],
         __typename: 'Query',
+        tasks: [...SAMPLE_TASKS],
       },
     },
   },
@@ -50,12 +51,12 @@ const TASKS_MOCKS = [
     },
     result: {
       data: {
+        __typename: 'Mutation',
         toggleTask: {
-          id: '1',
-          completed: false,
           __typename: 'Task',
+          completed: false,
+          id: '1',
         },
-        __typename: 'Mutation',
       },
     },
   },
@@ -76,13 +77,13 @@ const TASKS_MOCKS = [
     },
     result: {
       data: {
+        __typename: 'Mutation',
         addTask: {
-          id: '4',
+          __typename: 'Task',
           completed: false,
+          id: '4',
           text: 'Learn Jest',
-          __typename: 'Task',
         },
-        __typename: 'Mutation',
       },
     },
   },
@@ -117,7 +118,19 @@ const ADD_TASK_MUTATION = gql`
   }
 `;
 
-function Task({ onChange, task }) {
+interface TaskFragment {
+  id: number;
+  text: string;
+  completed: boolean;
+}
+
+function Task({
+  onChange,
+  task,
+}: {
+  task: TaskFragment;
+  onChange: (task: TaskFragment) => void;
+}) {
   return (
     <li>
       <input
@@ -130,7 +143,13 @@ function Task({ onChange, task }) {
   );
 }
 
-function TaskList({ onChange, tasks }) {
+function TaskList({
+  onChange,
+  tasks,
+}: {
+  tasks: TaskFragment[];
+  onChange: (task: TaskFragment) => void;
+}) {
   return (
     <ul>
       {tasks.map(task => (
@@ -163,7 +182,7 @@ it('should create a function to perform mutations', async () => {
   const { container } = render(
     <ApolloProvider client={client}>
       <Suspense fallback={<div>Loading</div>}>
-        <TasksWithMutation query={TASKS_QUERY} />
+        <TasksWithMutation />
       </Suspense>
     </ApolloProvider>
   );
@@ -174,41 +193,47 @@ it('should create a function to perform mutations', async () => {
   flushEffects();
   await waitForNextTick();
 
-  const firstCheckbox = container.querySelector('input:checked');
+  const firstCheckbox = container.querySelector<HTMLInputElement>(
+    'input:checked'
+  )!;
   expect(firstCheckbox.checked).toBeTruthy();
 
   fireEvent.click(firstCheckbox);
   await waitForNextTick();
   flushEffects();
 
-  expect(container.querySelector('input').checked).toBeFalsy();
+  expect(container.querySelector('input')!.checked).toBeFalsy();
 });
 
 it('should allow to pass options forwarded to the mutation', async () => {
   function TasksWithMutation() {
     const { data, error } = useQuery(TASKS_QUERY);
-    const addTask = useMutation(ADD_TASK_MUTATION, {
-      update: (proxy, mutationResult) => {
-        const previousData = proxy.readQuery({ query: TASKS_QUERY });
-        previousData.tasks.push(mutationResult.data.addTask);
-        proxy.writeQuery({ data: previousData, query: TASKS_QUERY });
-      },
-      variables: {
-        input: {
-          text: 'Learn Jest',
+    const addTask = useMutation<any, { input: Partial<TaskFragment> }>(
+      ADD_TASK_MUTATION,
+      {
+        update: (proxy, mutationResult) => {
+          const previousData = proxy.readQuery<{ tasks: TaskFragment[] }>({
+            query: TASKS_QUERY,
+          });
+          previousData!.tasks.push(mutationResult!.data!.addTask);
+          proxy.writeQuery({ data: previousData, query: TASKS_QUERY });
         },
-      },
-    });
-    const onChange = () => {};
+        variables: {
+          input: {
+            text: 'Learn Jest',
+          },
+        },
+      }
+    );
 
     if (error) {
       throw error;
     }
 
     return (
       <>
-        <TaskList onChange={onChange} tasks={data.tasks} />
-        <button data-testid="add-task-button" onClick={addTask}>
+        <TaskList onChange={noop} tasks={data.tasks} />
+        <button data-testid="add-task-button" onClick={() => addTask()}>
           Add new task
         </button>
       </>
@@ -219,7 +244,7 @@ it('should allow to pass options forwarded to the mutation', async () => {
   const { container, getByTestId } = render(
     <ApolloProvider client={client}>
       <Suspense fallback={<div>Loading</div>}>
-        <TasksWithMutation query={TASKS_QUERY} />
+        <TasksWithMutation />
       </Suspense>
     </ApolloProvider>
   );