Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[@tanstack/react-query] Adding definition (#4557)
* first commit * Updated doc for react-query * add more definition and all test are passing atm * Added more test and fixed some type issues * updated PR * update more API' --------- Co-authored-by: CarlosP <carlos.pettersen@gbst.com>
- Loading branch information
1 parent
68e40ea
commit f4ac17f
Showing
2 changed files
with
227 additions
and
0 deletions.
There are no files selected for viewing
147 changes: 147 additions & 0 deletions
147
definitions/npm/@tanstack/react-query_v5.x.x/flow_v0.83.x-/react-query_v5.x.x.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,147 @@ | ||
declare module "@tanstack/react-query" { | ||
declare type QueryFunctionContext = { [key: string]: any }; | ||
|
||
declare type UseQueryOptions<TData> = {| | ||
queryKey: Array<any>, | ||
queryFn?: (context: QueryFunctionContext) => Promise<TData>, | ||
cacheTime?: any, | ||
enabled?: any, | ||
networkMode?: any, | ||
initialData?: any, | ||
initialDataUpdatedAt?: any, | ||
keepPreviousData?: any, | ||
meta?: any, | ||
notifyOnChangeProps?: any, | ||
onError?: any, | ||
onSettled?: any, | ||
onSuccess?: any, | ||
placeholderData?: any, | ||
queryKeyHashFn?: any, | ||
refetchInterval?: any, | ||
refetchIntervalInBackground?: any, | ||
refetchOnMount?: any, | ||
refetchOnReconnect?: any, | ||
refetchOnWindowFocus?: any, | ||
retry?: any, | ||
retryOnMount?: any, | ||
retryDelay?: any, | ||
select?: any, | ||
staleTime?: any, | ||
structuralSharing?: any, | ||
suspense?: any, | ||
useErrorBoundary?: any, | ||
|}; | ||
|
||
declare type UseQueryReturn<TData, TError> = {| | ||
isLoading: boolean, | ||
data: TData, | ||
dataUpdatedAt: number, | ||
error: null | TError, | ||
errorUpdatedAt: number, | ||
failureCount: number, | ||
failureReason: null | TError, | ||
fetchStatus: any, | ||
isError: boolean, | ||
isFetched: boolean, | ||
isFetchedAfterMount: boolean, | ||
isFetching: boolean, | ||
isInitialLoading: boolean, | ||
isLoadingError: boolean, | ||
isPaused: boolean, | ||
isPending: boolean, | ||
isPlaceholderData: boolean, | ||
isRefetchError: boolean, | ||
isRefetching: boolean, | ||
isStale: boolean, | ||
isSuccess: boolean, | ||
refetch: any, | ||
status: string, | ||
|}; | ||
|
||
declare type UseMutationOptions<TData, TError> = {| | ||
mutationKey: Array<string>, | ||
mutationFn: () => Promise<TData>, | ||
onSuccess?: (data: TData, variables: any) => Promise<any>, | ||
onError?: (error: TError) => Promise<any>, | ||
onSettled?: (data: TData | void, error: TError | null, variables: any) => Promise<any>, | ||
onMutate?: () => Promise<any>, | ||
cacheTime?: any, | ||
mutationKey?: any, | ||
networkMode?: any, | ||
retry?: any, | ||
retryDelay?: any, | ||
useErrorBoundary?: any, | ||
meta?: any, | ||
|} | ||
|
||
declare type UseMutationReturn<TData, TError> = {| | ||
data: TData | void, | ||
error: TError | null, | ||
isError: boolean, | ||
isIdle: boolean, | ||
isLoading: boolean, | ||
isPaused: boolean, | ||
isSuccess: boolean, | ||
failureCount: number, | ||
failureReason: TError | null, | ||
mutate: ( | ||
variables: any, | ||
options?: {| | ||
onError?: (error: TError) => Promise<any>, | ||
onSettled?: (data: TData | void, error: TError | null, variables: any) => Promise<any>, | ||
onSuccess?: (data: TData, variables: any) => Promise<any>, | ||
|} | ||
) => Promise<any>, | ||
mutateAsync: ( | ||
variables: any, | ||
options?: {| | ||
onError?: (error: TError) => Promise<any>, | ||
onSettled?: (data: TData | void, error: TError | null, variables: any) => Promise<any>, | ||
onSuccess?: (data: TData, variables: any) => Promise<any>, | ||
|} | ||
) => Promise<TData>, | ||
reset: () => void, | ||
status: string, | ||
|}; | ||
|
||
declare class QueryClient { | ||
queryCache?: any, | ||
mutationCache?: any, | ||
defaultOptions?: any, | ||
} | ||
|
||
declare type QueryClientProviderOptions = {| | ||
client: QueryClient, | ||
children?: React$Node, | ||
|}; | ||
|
||
declare module.exports: {| | ||
useQuery: <T = any, E = any>(queryOptions: UseQueryOptions<T>) => UseQueryReturn<T,E>, | ||
useMutation: <T = any, E = any>(options: UseMutationOptions<T,E>) => UseMutationReturn<T,E>, | ||
QueryClientProvider: (options: QueryClientProviderOptions) => React$Node, | ||
QueryClient: typeof QueryClient, | ||
useQueries: any, | ||
useInfiniteQuery: any, | ||
useIsFetching: any, | ||
useIsMutating: any, | ||
useMutationState: any, | ||
useSuspenseQuery: any, | ||
useSuspenseInfiniteQuery: any, | ||
useSuspenseQueries: any, | ||
useQueryClient: any, | ||
queryOptions: any, | ||
infiniteQueryOptions: any, | ||
QueryCache: any, | ||
MutationCache: any, | ||
QueryObserver: any, | ||
InfiniteQueryObserver: any, | ||
QueriesObserver: any, | ||
QueryErrorResetBoundary: any, | ||
useQueryErrorResetBoundary: any, | ||
focusManager: any, | ||
onlineManager: any, | ||
dehydrate: any, | ||
hydrate: any, | ||
HydrationBoundary : any, | ||
|}; | ||
} |
80 changes: 80 additions & 0 deletions
80
definitions/npm/@tanstack/react-query_v5.x.x/flow_v0.83.x-/test_react-query_v5.x.x.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
import * as React from 'react'; | ||
import { describe, test } from 'flow-typed-test'; | ||
import { useQuery, QueryClientProvider, useMutation, QueryClient } from '@tanstack/react-query'; | ||
|
||
describe('react-query', ()=> { | ||
test('UseQuery', () => { | ||
// Correct usage | ||
const { isLoading, isSuccess, data } = useQuery({ | ||
queryKey: ['example'], | ||
queryFn: async () => { | ||
const response = await fetch('https://api.example.com/data'); | ||
const data = await response.json(); | ||
return data; | ||
}, | ||
}); | ||
|
||
(isLoading: boolean); | ||
(isSuccess: boolean); | ||
|
||
// Incorrect usage | ||
useQuery({ | ||
// $FlowExpectedError[incompatible-call] | ||
queryKey: 123, // Error: Array<string> | ||
queryFn: () => { | ||
// $FlowExpectedError[incompatible-call] | ||
return 'not a promise'; // Error: Promise is required | ||
}, | ||
}); | ||
}); | ||
|
||
test('UseMutation', () => { | ||
// Correct usage | ||
const {isLoading, isSuccess } = useMutation({ | ||
mutationKey: ['example'], | ||
mutationFn: async () => { | ||
const response = await fetch('https://api.example.com/mutate'); | ||
const data = await response.json(); | ||
return data; | ||
}, | ||
onSuccess: async (data, variables) => await console.log(data, variables), | ||
onError: async (error) => await console.error(error), | ||
onSettled: async (data, error, variables) => await console.log(data, error, variables), | ||
onMutate: async () => await console.log('onMutate callback'), | ||
}); | ||
|
||
(isLoading: boolean); | ||
(isSuccess: boolean); | ||
|
||
// Incorrect usage | ||
useMutation({ | ||
mutationKey: 123, // Error: Expected Array<string> | ||
mutationFn: () => { | ||
// $FlowExpectedError[incompatible-call] | ||
return 'not a promise'; // Error: Promise is required | ||
}, | ||
onSuccess: () => { | ||
// $FlowExpectedError[incompatible-call] | ||
return 'not a promise'; // Error: Promise is required | ||
}, | ||
onError: () => { | ||
// $FlowExpectedError[incompatible-call] | ||
return 'not a promise'; // Error: Promise is required | ||
}, | ||
onSettled: () => { | ||
// $FlowExpectedError[incompatible-call] | ||
return 'not a promise'; // Error: Promise is required | ||
}, | ||
onMutate: () => { | ||
// $FlowExpectedError[incompatible-call] | ||
return 'not a promise'; // Error: Promise is required | ||
}, | ||
}); | ||
}); | ||
|
||
test('QueryClientProvider', () => { | ||
// Correct usage | ||
const queryClient = new QueryClient(); | ||
<QueryClientProvider client={queryClient}><div /></QueryClientProvider>; | ||
}); | ||
}) |