Add types for react-query (#40312)

* Add types for react-query

* Add clearQueryCache export, fix typo in QueryOptions

types/react-query/index.d.ts

@@ -0,0 +1,123 @@
+// Type definitions for react-query 0.3
+// Project: https://github.com/tannerlinsley/react-query
+// Definitions by: Lukasz Fiszer <https://github.com/lukaszfiszer>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+import { ComponentType } from 'react';
+
+export function useQuery<TResult, TVariables extends object>(
+    queryKey: QueryKey<TVariables>,
+    queryFn: QueryFunction<TResult, TVariables>,
+    options?: QueryOptions<TResult>
+): QueryResult<TResult, TVariables>;
+
+export type QueryKey<TVariables> = string | [string, TVariables] | false | null | QueryKeyFunction<TVariables>;
+export type QueryKeyFunction<TVariables> = () => string | [string, TVariables] | false | null;
+
+export type QueryFunction<TResult, TVariables extends object> = (variables: TVariables) => Promise<TResult>;
+
+export interface QueryOptions<TResult> {
+    manual?: boolean;
+    paginated?: boolean;
+    getCanFetchMore?: (lastPage: number, allPages: number) => boolean;
+    retry?: boolean | number;
+    retryDelay?: (retryAttempt: number) => number;
+    staleTime?: number;
+    cacheTime?: number;
+    refetchInterval?: false | number;
+    onError?: (err: any) => void;
+    onSucess?: (data: TResult) => void;
+    suspense?: boolean;
+}
+
+export interface QueryResult<TResult, TVariables> {
+    data: null | TResult;
+    error: null | Error;
+    isLoading: boolean;
+    isFetching: boolean;
+    isCached: boolean;
+    failureCount: number;
+    refetch: (arg?: {variables?: TVariables, merge?: (...args: any[]) => any, disableThrow?: boolean}) => void;
+    isFetchingMore: boolean;
+    canFetchMore: boolean;
+    fetchMore: (variables?: TVariables) => Promise<TResult>;
+}
+
+export function prefetchQuery<TResult, TVariables extends object>(
+    queryKey: QueryKey<TVariables>,
+    queryFn: QueryFunction<TResult, TVariables>,
+    options?: PrefetchQueryOptions<TResult>
+): Promise<TResult>;
+
+export interface PrefetchQueryOptions<TResult> extends QueryOptions<TResult> {
+    force?: boolean;
+}
+
+export function useMutation<TResults, TVariables extends object>(
+    mutationFn: MutationFunction<TResults, TVariables>,
+    mutationOptions?: MutationOptions
+): [MutateFunction<TResults, TVariables>, MutationResult<TResults>];
+
+export type MutationFunction<TResults, TVariables extends object> = (
+    variables: TVariables,
+) => Promise<TResults>;
+
+export interface MutationOptions {
+    refetchQueries?: Array<string | [string, object]>;
+    refetchQueriesOnFailure?: boolean;
+}
+
+export type MutateFunction<TResults, TVariables extends object> = (
+    variables?: TVariables,
+    options?: {
+        updateQuery?: string | [string, object],
+        waitForRefetchQueries?: boolean;
+    }
+) => Promise<TResults>;
+
+export interface MutationResult<TResults> {
+    data: TResults | null;
+    isLoading: boolean;
+    error: null | Error;
+    promise: Promise<TResults>;
+}
+
+export function setQueryData(
+    queryKey: string | [string, object],
+    data: any,
+    options?: {
+        shouldRefetch?: boolean
+    }
+): void | Promise<void>;
+
+export function refetchQuery(
+    queryKey: string | [string, object] | [string, false],
+    force?: {
+        force?: boolean
+    }
+): Promise<void>;
+
+export function refetchAllQueries(
+    options?: {
+        force?: boolean,
+        includeInactive: boolean
+    }
+): Promise<void>;
+
+export function useIsFetching(): boolean;
+
+export const ReactQueryConfigProvider: React.ComponentType<{
+    config?: ReactQueryProviderConfig
+}>;
+
+export interface ReactQueryProviderConfig {
+    retry: number;
+    retryDelay: (attempt: number) => number;
+    staleTime: number;
+    cacheTime: number;
+    refetchAllOnWindowFocus: boolean;
+    refetchInterval: boolean;
+    suspense: boolean;
+}
+
+export function clearQueryCache(): void;

types/react-query/react-query-tests.ts

@@ -0,0 +1,66 @@
+import { useMutation, useQuery } from "react-query";
+
+const queryFn = () => Promise.resolve();
+
+// Query - simple case
+const querySimple = useQuery('todos',
+    () => Promise.resolve('test'));
+querySimple.data; // $ExpectType string | null
+querySimple.error; // $ExpectType Error | null
+querySimple.isLoading; // $ExpectType boolean
+querySimple.refetch(); // $ExpectType void
+
+// Query Variables
+const param = 'test';
+const queryVariables = useQuery(['todos', {param}],
+    (variables) => Promise.resolve(variables.param === 'test'));
+
+queryVariables.data; // $ExpectType boolean | null
+queryVariables.refetch({variables: {param: 'foo'}}); // $ExpectType void
+queryVariables.refetch({variables: {other: 'foo'}}); // $ExpectError
+
+// Query with falsey query key
+useQuery(false && ['foo', { bar: 'baz' }], queryFn);
+
+// Query with query key function
+useQuery(() => ['foo', { bar: 'baz' }], queryFn);
+
+// Query with nested variabes
+const queryNested = useQuery(['key', {
+    nested: {
+        props: [1, 2]
+    }
+}], (variables) => Promise.resolve(variables.nested.props[0]));
+queryNested.data; // $ExpectType number | null
+
+// Simple mutation
+const mutation = () => Promise.resolve(['foo', 1]);
+
+const [mutate] = useMutation(mutation, {
+    refetchQueries: ['todos', ['todo', { id: 5 }], 'reminders'],
+    refetchQueriesOnFailure: false
+});
+mutate();
+mutate(undefined, {
+    updateQuery: 'query',
+    waitForRefetchQueries: false
+});
+
+// Invalid mutatation funciton
+useMutation((arg1: string, arg2: string) => Promise.resolve()); // $ExpectError
+useMutation((arg1: string) => null); // $ExpectError
+
+// Mutation with variables
+const [mutateWithVars] = useMutation(
+    ({param}: {param: number}) => Promise.resolve(Boolean(param)),
+    {
+    refetchQueries: ['todos', ['todo', { id: 5 }], 'reminders'],
+    refetchQueriesOnFailure: false
+});
+
+mutateWithVars({param: 1}, {
+  updateQuery: 'query',
+  waitForRefetchQueries: false
+});
+
+mutateWithVars({param: 'test'}); // $ExpectError

types/react-query/tsconfig.json

@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictFunctionTypes": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+      "index.d.ts",
+      "react-query-tests.ts"
+    ]
+}

types/react-query/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }