refactor: add typescript support (TanStack#767)

.babelrc

@@ -8,6 +8,7 @@
         "exclude": ["@babel/plugin-transform-regenerator"]
       }
     ],
+    "@babel/preset-typescript",
     "@babel/react"
   ],
   "plugins": ["babel-plugin-transform-async-to-promises"],

.eslintrc

@@ -1,10 +1,24 @@
 {
-  "parser": "babel-eslint",
-  "extends": ["react-app", "prettier"],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "react-app",
+    "prettier"
+  ],
   "env": {
     "es6": true
   },
   "parserOptions": {
     "sourceType": "module"
+  },
+  "rules": {
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-non-null-assertion": "off"
   }
 }

.gitignore

@@ -27,3 +27,6 @@ yarn-error.log*
 size-plugin.json
 stats.html
 .vscode/settings.json
+
+!/types/index.d.ts
+types/**/*.ts

docs/src/manifests/manifest.json

@@ -37,6 +37,11 @@
               "title": "Comparison",
               "path": "/docs/comparison",
               "editUrl": "/docs/comparison.md"
+            },
+            {
+              "title": "TypeScript",
+              "path": "/docs/typescript",
+              "editUrl": "/docs/typescript.md"
             }
           ]
         },

docs/src/pages/docs/typescript.md

@@ -0,0 +1,24 @@
+---
+id: typescript
+title: TypeScript
+---
+
+React Query is now written in **TypeScript** to make sure the library and your projects are type-safe!
+
+## Migration
+
+React Query is currently typed with an external type definition file, which unfortunately often gets out of sync with the actual code.
+
+This is one of the reasons why the library has been migrated to TypeScript.
+
+But before exposing the new types, we first want to get your feedback on it!
+
+Install the `tsnext` tag to get the latest React Query with the new types:
+
+```sh
+npm install react-query@tsnext --save
+```
+
+## Changes
+
+- The query results are no longer discriminated unions, which means you have to check the actual `data` and `error` properties.

package.json

@@ -16,9 +16,12 @@
   "sideEffects": false,
   "scripts": {
     "test": "is-ci \"test:ci\" \"test:dev\"",
-    "test:dev": "jest --watch",
-    "test:ci": "jest && yarn dtslint",
+    "test:dev": "npm run test:types && npm run test:eslint && jest --watch",
+    "test:ci": "npm run test:types && npm run test:eslint && jest && yarn dtslint",
     "test:coverage": "yarn test:ci; open coverage/lcov-report/index.html",
+    "test:types": "tsc",
+    "test:eslint": "eslint --ext .ts,.tsx ./src",
+    "gen:types": "tsc --project ./tsconfig.types.json",
     "build": "NODE_ENV=production rollup -c",
     "now-build": "yarn && cd www && yarn && yarn build",
     "start": "rollup -c -w",
@@ -53,10 +56,14 @@
     "@babel/core": "^7.10.2",
     "@babel/preset-env": "^7.10.2",
     "@babel/preset-react": "^7.10.1",
+    "@babel/preset-typescript": "^7.10.4",
     "@rollup/plugin-replace": "^2.3.3",
     "@svgr/rollup": "^5.4.0",
-    "@testing-library/react": "^10.2.1",
+    "@testing-library/react": "^10.4.7",
+    "@types/jest": "^26.0.4",
     "@types/react": "^16.9.41",
+    "@typescript-eslint/eslint-plugin": "^3.6.1",
+    "@typescript-eslint/parser": "^3.6.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.0.1",
     "babel-plugin-transform-async-to-promises": "^0.8.15",

rollup.config.js

@@ -13,7 +13,11 @@ const globals = {
   react: 'React',
 }
 
-const inputSrc = 'src/react/index.js'
+const inputSrc = 'src/index.ts'
+
+const extensions = ['.js', '.jsx', '.es6', '.es', '.mjs', '.ts', '.tsx']
+const babelConfig = { extensions }
+const resolveConfig = { extensions }
 
 export default [
   {
@@ -24,7 +28,12 @@ export default [
       sourcemap: true,
     },
     external,
-    plugins: [resolve(), babel(), commonJS(), externalDeps()],
+    plugins: [
+      resolve(resolveConfig),
+      babel(babelConfig),
+      commonJS(),
+      externalDeps(),
+    ],
   },
   {
     input: inputSrc,
@@ -34,7 +43,13 @@ export default [
       sourcemap: true,
     },
     external,
-    plugins: [resolve(), babel(), commonJS(), externalDeps(), terser()],
+    plugins: [
+      resolve(resolveConfig),
+      babel(babelConfig),
+      commonJS(),
+      externalDeps(),
+      terser(),
+    ],
   },
   {
     input: inputSrc,
@@ -46,7 +61,12 @@ export default [
       globals,
     },
     external,
-    plugins: [resolve(), babel(), commonJS(), externalDeps()],
+    plugins: [
+      resolve(resolveConfig),
+      babel(babelConfig),
+      commonJS(),
+      externalDeps(),
+    ],
   },
   {
     input: inputSrc,
@@ -60,8 +80,8 @@ export default [
     external,
     plugins: [
       replace({ 'process.env.NODE_ENV': `"production"`, delimiters: ['', ''] }),
-      resolve(),
-      babel(),
+      resolve(resolveConfig),
+      babel(babelConfig),
       commonJS(),
       externalDeps(),
       terser(),

src/core/config.ts

@@ -0,0 +1,58 @@
+import { stableStringify, identity, deepEqual } from './utils'
+import {
+  ArrayQueryKey,
+  QueryKey,
+  QueryKeySerializerFunction,
+  ReactQueryConfig,
+} from './types'
+
+// TYPES
+
+export interface ReactQueryConfigRef {
+  current: ReactQueryConfig
+}
+
+// CONFIG
+
+export const defaultQueryKeySerializerFn: QueryKeySerializerFunction = (
+  queryKey: QueryKey
+): [string, ArrayQueryKey] => {
+  try {
+    let arrayQueryKey: ArrayQueryKey = Array.isArray(queryKey)
+      ? queryKey
+      : [queryKey]
+    const queryHash = stableStringify(arrayQueryKey)
+    arrayQueryKey = JSON.parse(queryHash)
+    return [queryHash, arrayQueryKey]
+  } catch {
+    throw new Error('A valid query key is required!')
+  }
+}
+
+export const DEFAULT_CONFIG: ReactQueryConfig = {
+  shared: {
+    suspense: false,
+  },
+  queries: {
+    queryKeySerializerFn: defaultQueryKeySerializerFn,
+    enabled: true,
+    retry: 3,
+    retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 30000),
+    staleTime: 0,
+    cacheTime: 5 * 60 * 1000,
+    refetchOnWindowFocus: true,
+    refetchInterval: false,
+    queryFnParamsFilter: identity,
+    refetchOnMount: true,
+    isDataEqual: deepEqual,
+    useErrorBoundary: false,
+  },
+  mutations: {
+    throwOnError: false,
+    useErrorBoundary: false,
+  },
+}
+
+export const defaultConfigRef: ReactQueryConfigRef = {
+  current: DEFAULT_CONFIG,
+}

src/core/index.ts

@@ -0,0 +1,9 @@
+export { queryCache, queryCaches, makeQueryCache } from './queryCache'
+export { setFocusHandler } from './setFocusHandler'
+export { stableStringify, setConsole, deepIncludes } from './utils'
+
+// Types
+export * from './types'
+export type { Query } from './query'
+export type { QueryCache } from './queryCache'
+export type { ConsoleObject } from './utils'