Update react-query type definition for v1 #42830

lukaszfiszer · 2020-03-04T14:18:04Z

Please fill in this template.

Use a meaningful title for the pull request. Include the name of the package modified.
Test the change in your own code. (Compile and run.)
Add or edit tests to reflect the change. (Run with npm test.)
Follow the advice from the readme.
Avoid common mistakes.
Run npm run lint package-name (or tsc if no tslint.json is present).

If changing an existing definition:

Provide a URL to documentation or source code which provides context for the suggested changes: https://github.com/tannerlinsley/react-query/blob/master/CHANGELOG.md#100
If this PR brings the type definitions up to date with a new version of the JS library, update the version number in the header.
If you are making substantial changes, consider adding a tslint.json containing { "extends": "dtslint/dt.json" }. If for reason the any rule need to be disabled, disable it for that line using // tslint:disable-next-line [ruleName] and not for whole package so that the need for disabling can be reviewed.

typescript-bot · 2020-03-04T14:22:31Z

@lukaszfiszer Thank you for submitting this PR!

🔔 @JaceHensley @matteofrana - please review this PR in the next few days. Be sure to explicitly select Approve or Request Changes in the GitHub UI so I know what's going on.

If no reviewer appears after a week, a DefinitelyTyped maintainer will review the PR instead.

typescript-bot · 2020-03-04T14:22:32Z

@lukaszfiszer The Travis CI build failed! Please review the logs for more information.

Once you've pushed the fixes, the build will automatically re-run. Thanks!

lukaszfiszer · 2020-03-04T14:24:39Z

Lot's of code style errors - will fix them soon

types/react-query/index.d.ts

typescript-bot · 2020-03-04T16:22:41Z

@lukaszfiszer The Travis CI build failed! Please review the logs for more information.

Once you've pushed the fixes, the build will automatically re-run. Thanks!

typescript-bot · 2020-03-04T18:23:10Z

Since you're a listed owner and the build passed, this PR is fast-tracked. A maintainer will merge shortly. If it shouldn't be merged yet, please leave a comment saying so and we'll wait. Thank you for your contribution to DefinitelyTyped!

purge · 2020-03-04T18:36:36Z

@lukaszfiszer what do you think about a discriminated union on status thus allowing data to not be undefined in that state?

lukaszfiszer · 2020-03-04T20:55:11Z

@purge you mean discriminated union of QueryResult interface on status and date fields?

types/react-query/index.d.ts

lukaszfiszer · 2020-03-05T15:55:07Z

@purge - discriminated union implemented

purge · 2020-03-05T16:08:59Z

@lukaszfiszer nice! i checked the source earlier and it does appear that data can still be set for states other than 'success' so you might wanna make that an |

lukaszfiszer · 2020-03-10T18:40:06Z

@rbuckton can you mark the changes you'd requested as resolved? Otherwise it won't be merged I guess

typescript-bot · 2020-03-10T19:38:57Z

🔔 @rbuckton - Thanks for your review of this PR! Can you please look at the new code and update your review status if appropriate?

types/react-query/index.d.ts

smashercosmo · 2020-03-13T20:47:24Z

New version of react-query has just been released

1. Added the ability to use staleTime: Infinity for queries that should never go stale
2. Added the queryCache.getQueries function
3. useMutation can now allow multiple mutation requests at the same

lukaszfiszer · 2020-03-13T22:14:00Z

@smashercosmo

Infinity is of type number - no changes needed in types
type definition queryCache.getQueries added
no change in types requied

lukaszfiszer · 2020-03-13T22:15:36Z

@rbuckton - can you review and approve?

typescript-bot · 2020-03-13T22:31:58Z

@lukaszfiszer - It appears Travis did not correctly run on this PR! /cc @RyanCavanaugh to investigate and advise.

nucleartux · 2020-03-14T14:21:19Z

I have two problems with latest typings of useInfiniteQuery:
1.

getFetchMore result expects to be equal QueryKey but it should not, getFetchMore just adds third (last actually) optional parameter to queryFn (https://github.com/tannerlinsley/react-query#load-more--infinite-scroll-with-useinfinitequery)
2.

data still has type [] | TResult[] even if I check status === 'success'. So I can't really iterate over data without manually casting types.

lukaszfiszer · 2020-03-14T16:08:44Z

@nucleartux you're right. The docs were not very clear on that.

I took some time trying to fix the types, but failed so far. It would probably require a rewrite of useInfiniteQuery types, introducing a new generic parameter TQueryFunctionArgs in place of TQueryKey. The latter does not have any information about the type that needs to be returned from getFetchMore

smashercosmo · 2020-03-16T11:24:01Z

types/react-query/index.d.ts

@@ -36,107 +53,218 @@ export interface QueryOptions<TResult> {
    refetchOnWindowFocus?: boolean;
    onError?: (err: any) => void;
    onSuccess?: (data: TResult) => void;
+    onSettled?: (data: TResult, err: any) => void;
    suspense?: boolean;
    initialData?: TResult;


initialData can be a function

smashercosmo · 2020-03-16T11:40:36Z

types/react-query/index.d.ts

-    queryFn: QueryFunction<TResult, TVariables>,
-    options?: QueryOptions<TResult>
-): QueryResult<TResult, TVariables>;
+export function useQuery<TResult, TQueryKey extends QueryKey>(


useQuery can accept object as argument (same for usePaginatedQuery and useInfiniteQuery)

useQuery({ queryKey, queryFn, variables, config })

clementgarbay · 2020-03-22T15:58:19Z

types/react-query/index.d.ts

-    paginated: true;
-    getCanFetchMore: (lastPage: TResult, allPages: TResult[]) => boolean;
+export interface InfiniteQueryOptions<TResult, FetchMoreVariable> extends QueryOptions<TResult> {
+    getFetchMore?: ((lastGroup: TResult, allGroups: TResult[]) => FetchMoreVariable) | boolean;


Shouldn't this be?

Suggested change

getFetchMore?: ((lastGroup: TResult, allGroups: TResult[]) => FetchMoreVariable) | boolean;

getFetchMore?: (lastGroup: TResult, allGroups: TResult[]) => FetchMoreVariable | boolean;

From what I understand in the doc and the code it's the result of the function that is either a FetchMoreVariable or a boolean.

Maybe this could be the right typing:

Suggested change

getFetchMore?: ((lastGroup: TResult, allGroups: TResult[]) => FetchMoreVariable) | boolean;

getFetchMore?: (lastGroup: TResult, allGroups: TResult[]) => FetchMoreVariable | false;

bjarkehs · 2020-03-24T02:08:29Z

At this point I think it would be better to get something merged, and then tweak it later.

simlrh · 2020-03-24T09:21:16Z

IMHO an incomplete initial implementation is fine, but it shouldn't flag errors on correct code, which these types currently do.

barrymay · 2020-03-24T13:19:36Z

Just curious, I know the rbuckton approval appears to be blocking this - but he hasn’t been around to confirm the changes. What about creating a new PR and getting that re-approved if that’s the blocker?

(I’m not debating anyone else’s more active concerns, but in these times you never know why someone’s away)

@lukaszfiszer thanks for the work so far!

Fiszcz · 2020-03-26T13:36:35Z

types/react-query/index.d.ts

-    queryFn: QueryFunction<TResult, TVariables>,
-    options?: QueryOptions<TResult>
-): QueryResult<TResult, TVariables>;
+export function useQuery<TResult, TQueryKey extends QueryKey>(


Yo Łukasz,

What do you think about this:

export function useQuery<TResult, TQueryKey extends QueryKey>( queryKey: TQueryKey | (() => TQueryKey), queryFn: QueryFunction<TResult, TVariables>, queryFn: (key: string, ...args: QueryKeyVariablesArgs<TQueryKey>) => Promise<TResult>, options?: QueryOptions<TResult> options?: QueryOptions<TResult>, ): QueryResult<TResult, TVariables>; ): QueryState<TResult>; export function useQuery<TResult, TQueryKey extends QueryKey, TQueryVariables extends any[]>( queryKey: TQueryKey | (() => TQueryKey), queryVariables: TQueryVariables, queryFn: QueryFunction<TResult, TVariables>, queryFn: (key: string, ...args: Concat<QueryKeyVariablesArgs<TQueryKey>, TQueryVariables>) => Promise<TResult>, options?: QueryOptions<TResult> options?: QueryOptions<TResult>, ): QueryResult<TResult, TVariables>; ): QueryState<TResult>;

?

This is simple solution for optional queryVariables, it's not perfect, but for first version of types for React-Query should be fine.

Concat<T, R> is implementation from typescript-tuple package.

Igorbek

I mistakenly have been working on the same problem wich resulted in my PR #43438

I think I made type inference for functions, keys, and variables to work quite well. So I checked the tests I used with this PR and found a few issues that you might want to add to your cases as well.

const queryFn = (name: string, params: { bar: string }) => Promise.resolve(10);

declare const condition: boolean;

// Query with falsey query key
useQuery(condition && ['foo', { bar: 'baz' }], queryFn);
//                                             ~~~~~~~
// Argument of type '(name: string, params: { bar: string; }) => Promise<number>' is not assignable to parameter of type '(key: string, ...args: [] | [{ bar: string; }]) => Promise<number>'.
//   Types of parameters 'params' and 'args' are incompatible.
//     Type '[] | [{ bar: string; }]' is not assignable to type '[{ bar: string; }]'.
//       Property '0' is missing in type '[]' but required in type '[{ bar: string; }]'.

// This is just missing object API (when all the parameters passed as an object)
useQuery({
    queryKey: condition && ['foo', { bar: 'baz' }],
    queryFn,
});
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Expected 2-3 arguments, but got 1.
// An argument for 'queryFn' was not provided.

const query2 = useQuery(
    ['key', { a: 1 }],
    [{ b: true }, { c: 'c' }],
    //~~~~~~~~~~~~~~~~~~~~~~~
    // Argument of type '({ b: boolean; } | { c: string; })[]' is not assignable to parameter of type '(key: string, args_1: { a: number; }) => Promise<unknown>'.
    //   Type '({ b: boolean; } | { c: string; })[]' provides no match for the signature '(key: string, args_1: { a: number; }): Promise<unknown>'.
    //
    (
        key1,
        //~~ Parameter 'key1' implicitly has an 'any' type.
        key2,
        //~~ Parameter 'key2' implicitly has an 'any' type.
        var1,
        //~~ Parameter 'var1' implicitly has an 'any' type.
        var2,
        //~~ Parameter 'var2' implicitly has an 'any' type.
    ) => Promise.resolve(key1 === 'key' && key2.a === 1 && var1.b === true && var2.c === 'c'),
);
query2.data; // $ExpectType undefined | boolean
//     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Expected: undefined | boolean; got: unknown

- fix a few issues

lukaszfiszer · 2020-03-29T12:47:21Z

Since @Igorbek provided a more complete implementation in #43438, I will close this PR. Please take your time and review there.

lukaszfiszer and others added 3 commits March 4, 2020 09:39

WIP

881d530

React-query v1 types

84c2a7d

React query v1 types - tests

fb6b2a3

lukaszfiszer mentioned this pull request Mar 4, 2020

react-query - Add status field to QueryResult and MutationResult interfaces #42705

Closed

7 tasks

typescript-bot added Author is Owner The author of this PR is a listed owner of the package. The Travis CI build failed labels Mar 4, 2020

lukaszfiszer mentioned this pull request Mar 4, 2020

Update types for react-query v1 #42678

Closed

2 tasks

purge reviewed Mar 4, 2020

View reviewed changes