Typescript support about query HOT 25 CLOSED

If the examples provided within the main repo could demonstrate some robust typescript examples that would be fantastic

from query.

But, why can't the user just annotate with the proper type?

async function fetchPosts(): Promise<Post[]> {
  // ...
}

const { data, fetchMore } = useQuery<Post[]>('posts', fetchPosts, { paginated: true })

which can even be reduced due to TS type inferrence:

async function fetchPosts(): Promise<Post[]> {
  // ...
}

const { data, fetchMore } = useQuery('posts', fetchPosts, { paginated: true })

now data is of type Post[] | null and everything is fine.

I'd see it as a non-use case to have the same Query either paginated or not in the same component, wdyt?

from query.

@LucaDe type definitions for v1 are being worked on here: DefinitelyTyped/DefinitelyTyped#42830

from query.

Types are now available via @types/react-query. For convenience, they are a dependency of this library by default.

from query.

BTW: I tried some basic use cases in out TS code, it just works! Great work!

from query.

from query.

@lukaszfiszer in the meantime, would you be willing to share your types file? I'd like to use this in my typescript project.

from query.

@jparr721 sure: https://gist.github.com/lukaszfiszer/0c1accfe49ede30f21ce99cfa6d51dcb

from query.

I tried converting the codebase to Typescript, but had to quit an hour in. I've also never used Typescript before. I gave up when I realized the Data type was different for paginated results.

It doesn't compile, is only halfway done, and I probably introduced errors, but I'll leave it here for anyone that's interested.

https://gist.github.com/rostero1/4ad7088d445730a03cfdbf8475d3ea26

from query.

from query.

PR created in definitely-typed: DefinitelyTyped/DefinitelyTyped#40312

If anyone want to test those definitions locally in their project that would be a great help!

from query.

@tannerlinsley Thanks for review in dt repo.

However I've discovered there is an issue with types of useQuery. The data in QueryResult should be an array of resolved values when options.paginated=true. This is very difficult or even impossible to represent in Typescript - types cannot depend on runtime values.

For me it looks like that there are two versions of API of useQuery. Did you ever consider splitting it into the separate methods? Kind of like prefetchQuery is separated, even though it shares most of the options.

from query.

from query.

However I've discovered there is an issue with types of useQuery. The data in QueryResult should be an array of resolved values when options.paginated=true. This is very difficult or even impossible to represent in Typescript - types cannot depend on runtime values.

I think this should be doable by defining a method overload on the type, like this:

interface QueryOptionsWithPagination extends QueryOptions {
  paginate: true
}

export function useQuery<TResult, TVariables extends object>(
    queryKey: QueryKey<TVariables>,
    queryFn: QueryFunction<TResult, TVariables>,
    options?: QueryOptionsWithPagination<TResult>
): QueryResult<TResult[], TVariables>;

I did not try it out, but that should do the trick.

from query.

@siebertm you right, definition overloading does the trick. I've submitted a PR to types package: DefinitelyTyped/DefinitelyTyped#40399

from query.

Hi @lukaszfiszer one question, shouldn't all the properties be optional?

export interface QueryOptions<TResult> {
    manual?: 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;
}

from query.

@bgazzera well they are: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-query/index.d.ts#L26

Did you rather mean options passed to ReactQueryConfigProvider? If yes, the fix is on the way: DefinitelyTyped/DefinitelyTyped#40514

from query.

Thanks! Yes you are right 😅

from query.

Hey @lukaszfiszer , thanks for adding types. Do you have any plans to update them to match the newest react-query version? If not, I can support as well.

from query.

my bad, didn't see it. Awesome!!

from query.

@tannerlinsley seems like typings in DefinitelyTyped are outdated, could you please take care about it?

from query.

@JeremiAnastaziak. I'm sorry they're out of date! Unfortunately, that's not my responsibility right now and is one of the reasons that they are 3rd party.

from query.

sure, if u ever plan to add official support, I would love to help

from query.

PRs are open!

from query.

FYI - #362

from query.