Skip to content

Commit fb022e6

Browse files
vmarcospvmarcosp
committed
chore: added experimental bindings to @tanstack/query@v4
1 parent 4180445 commit fb022e6

13 files changed

+640
-652
lines changed

‎.npmignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
examples/
2+
assets/

‎examples/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@
1212
"@rescript/react": "0.10.3",
1313
"@rescriptbr/react-query": "../",
1414
"@ryyppy/rescript-promise": "2.1.0",
15-
"@vitejs/plugin-react": "1.0.1",
15+
"@vitejs/plugin-react": "2.0.1",
1616
"react": "17.0.0",
1717
"react-dom": "17.0.0",
18-
"react-query": "^3.25.0",
19-
"rescript": "9.1.4",
18+
"@tanstack/react-query": "4.2.1",
19+
"rescript": "10.0.1",
2020
"web-vitals": "2.0.1"
2121
},
2222
"devDependencies": {
23-
"vite": "2.3.8"
23+
"vite": "3.0.9"
2424
}
2525
}

‎examples/src/App.res

+13-13
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,15 @@ let fetchTodos = (_): Js.Promise.t<todo> => {
1616
module TodoItem = {
1717
@react.component
1818
let make = () => {
19-
let queryResult = ReactQuery.useQuery(
20-
ReactQuery.queryOptions(
21-
~queryFn=fetchTodos,
22-
~queryKey="todos",
23-
/*
24-
* Helper functions to convert unsupported TypeScript types in ReScript
25-
* Check out the module ReactQuery_Utils.res
26-
*/
27-
~refetchOnWindowFocus=ReactQuery.refetchOnWindowFocus(#bool(false)),
28-
(),
29-
),
30-
)
19+
let queryResult = ReactQuery.useQuery({
20+
queryFn: fetchTodos,
21+
queryKey: ["todos"],
22+
/*
23+
* Helper functions to convert unsupported TypeScript types in ReScript
24+
* Check out the module ReactQuery_Utils.res
25+
*/
26+
refetchOnWindowFocus: ReactQuery.refetchOnWindowFocus(#bool(false)),
27+
})
3128

3229
<div>
3330
{switch queryResult {
@@ -48,6 +45,9 @@ let client = ReactQuery.Provider.createClient()
4845
@react.component
4946
let make = () => {
5047
<ReactQuery.Provider client>
51-
<div> <h1> {React.string("ReScript + React Query")} </h1> <TodoItem /> </div>
48+
<div>
49+
<h1> {React.string("ReScript + React Query")} </h1>
50+
<TodoItem />
51+
</div>
5252
</ReactQuery.Provider>
5353
}

‎examples/yarn.lock

+519-533
Large diffs are not rendered by default.

‎package.json

+4-3
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,13 @@
1212
"@rescript/react": "0.10.3",
1313
"react": "17.0.2",
1414
"react-dom": "17.0.2",
15-
"rescript": "9.1.4"
15+
"rescript": "10.0.1"
1616
},
1717
"peerDependencies": {
18-
"@rescript/react": "^0.10.3",
18+
"@rescript/react": ">=0.10.3",
1919
"react": ">=17.0.2",
20-
"react-dom": ">=17.0.2"
20+
"react-dom": ">=17.0.2",
21+
"rescript": ">=10.0.1"
2122
},
2223
"scripts": {
2324
"rescript:build": "rescript build -with-deps",

‎src/ReactQuery.res

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1-
module InfiniteQuery = ReactQuery_InfiniteQuery
1+
include ReactQuery_InfiniteQuery
22
include ReactQuery_Query
33
include ReactQuery_Mutation
44
include ReactQuery_Hooks
55
include ReactQuery_Utils
66
include ReactQuery_Client
7+
module DevTools = {
8+
@react.component @module("@tanstack/react-query-devtools")
9+
external make: (~initialIsOpen: bool=?) => React.element = "ReactQueryDevtools"
10+
}

‎src/ReactQuery_Client.res

+5-8
Original file line numberDiff line numberDiff line change
@@ -82,10 +82,7 @@ type defaultOptions<'error, 'data, 'queryData, 'queryKey, 'pageParam> = {
8282
queries: option<queryObserverOptions<'error, 'data, 'queryData, 'queryKey, 'pageParam>>,
8383
}
8484

85-
type invalidateQueryFilter = {
86-
refetchActive: option<bool>,
87-
refetchInactive: option<bool>,
88-
}
85+
type invalidateQueryFilter = {refetchType: [#active | #inactive | #all | #none]}
8986

9087
type clientRefetchOptions = {throwOnError: option<bool>}
9188

@@ -146,7 +143,7 @@ type queryClient<'queryKey, 'queryData, 'queryError, 'pageParams> = {
146143
'queryData,
147144
'queryError,
148145
'pageParams,
149-
> => Js.Promise.t<ReactQuery_Types.infiniteData<'queryData, 'pageParams>>,
146+
> => Js.Promise.t<ReactQuery_Types.infiniteData<'queryData>>,
150147
prefetchQuery: fetchQueryOptions<'queryKey, 'queryData, 'queryError, 'pageParams> => Js.Promise.t<
151148
unit,
152149
>,
@@ -193,15 +190,15 @@ type queryClient<'queryKey, 'queryData, 'queryError, 'pageParams> = {
193190
clear: unit => unit,
194191
}
195192

196-
@module("react-query")
193+
@module("@tanstack/react-query")
197194
external useQueryClient: unit => queryClient<'queryKey, 'queryData, 'queryError, 'pageParams> =
198195
"useQueryClient"
199196

200197
module Provider = {
201-
@new @module("react-query")
198+
@new @module("@tanstack/react-query")
202199
external createClient: unit => queryClientValue = "QueryClient"
203200

204-
@module("react-query") @react.component
201+
@module("@tanstack/react-query") @react.component
205202
external make: (
206203
~client: queryClientValue,
207204
~contextSharing: bool=?,

‎src/ReactQuery_Hooks.res

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
type resetErrorBoundary = {reset: unit => unit}
22

3-
@module("react-query")
3+
@module("@tanstack/react-query")
44
external useIsFetching: unit => bool = "useIsFetching"
55

6-
@module("react-query") external useIsFetchingWithKeys: 'queryKey => bool = "useIsFetching"
6+
@module("@tanstack/react-query") external useIsFetchingWithKeys: 'queryKey => bool = "useIsFetching"
77

8-
@module("react-query")
8+
@module("@tanstack/react-query")
99
external useIsMutating: unit => bool = "useIsMutating"
1010

11-
@module("react-query") external useIsMutatingWithKeys: 'queryKey => bool = "useIsMutating"
11+
@module("@tanstack/react-query") external useIsMutatingWithKeys: 'queryKey => bool = "useIsMutating"
1212

13-
@module("react-query")
13+
@module("@tanstack/react-query")
1414
external useQueryErrorResetBoundary: unit => resetErrorBoundary = "useQueryErrorResetBoundary"

‎src/ReactQuery_InfiniteQuery.res

+39-42
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,40 @@
1-
type inifiniteQueryFunctionContext<'queryKey, 'pageParam> = {
2-
queryKey: array<'queryKey>,
3-
pageParam: option<'pageParam>,
1+
type inifiniteQueryFunctionContext<'queryKey> = {
2+
queryKey: 'queryKey,
3+
pageParam: option<int>,
44
}
55

6-
@deriving(abstract)
7-
type infiniteQueryOptions<'queryKey, 'queryData, 'queryError, 'pageParam> = {
8-
@optional queryKey: 'queryKey,
9-
@optional
10-
queryFn: inifiniteQueryFunctionContext<'queryKey, 'pageParam> => Js.Promise.t<'queryData>,
11-
@optional enabled: bool,
12-
@optional retry: ReactQuery_Types.retryValue<'queryError>,
13-
@optional retryOnMount: bool,
14-
@optional retryDelay: ReactQuery_Types.retryDelayValue<'queryError>,
15-
@optional staleTime: ReactQuery_Types.timeValue,
16-
@optional queryKeyHashFn: 'queryKey => string,
17-
@optional refetchInterval: ReactQuery_Types.refetchIntervalValue,
18-
@optional refetchIntervalInBackground: bool,
19-
@optional refetchOnMount: ReactQuery_Types.boolOrAlwaysValue,
20-
@optional refetchOnWindowFocus: ReactQuery_Types.boolOrAlwaysValue,
21-
@optional refetchOnReconnect: ReactQuery_Types.boolOrAlwaysValue,
22-
@optional notifyOnChangeProps: ReactQuery_Types.notifyOnChangePropsValue,
23-
@optional notifyOnChangePropsExclusions: array<string>,
24-
@optional onSuccess: 'queryData => unit,
25-
@optional onError: 'queryError => unit,
26-
@optional onSettled: ('queryData, 'queryError) => unit,
27-
@optional select: 'queryData => 'queryData,
28-
@optional suspense: bool,
29-
@optional keepPreviousData: bool,
30-
@optional structuralSharing: bool,
31-
@optional useErrorBoundary: bool,
32-
@optional initialData: 'queryData => 'queryData,
33-
@optional initialDataUpdatedAt: unit => int,
34-
@optional placeholderData: unit => 'queryData,
35-
@optional getNextPageParam: ('pageParam, array<'pageParam>) => option<'pageParam>,
36-
@optional getPreviousPageParam: ('pageParam, array<'pageParam>) => option<'pageParam>,
6+
type infiniteQueryOptions<'queryKey, 'queryData, 'queryError> = {
7+
queryKey?: 'queryKey,
8+
queryFn?: inifiniteQueryFunctionContext<'queryKey> => Js.Promise.t<'queryData>,
9+
enabled?: bool,
10+
retry?: ReactQuery_Types.retryValue<'queryError>,
11+
retryOnMount?: bool,
12+
retryDelay?: ReactQuery_Types.retryDelayValue<'queryError>,
13+
staleTime?: ReactQuery_Types.timeValue,
14+
queryKeyHashFn?: 'queryKey => string,
15+
refetchInterval?: ReactQuery_Types.refetchIntervalValue,
16+
refetchIntervalInBackground?: bool,
17+
refetchOnMount?: ReactQuery_Types.boolOrAlwaysValue,
18+
refetchOnWindowFocus?: ReactQuery_Types.boolOrAlwaysValue,
19+
refetchOnReconnect?: ReactQuery_Types.boolOrAlwaysValue,
20+
notifyOnChangeProps?: ReactQuery_Types.notifyOnChangePropsValue,
21+
notifyOnChangePropsExclusions?: array<string>,
22+
onSuccess?: 'queryData => unit,
23+
onError?: 'queryError => unit,
24+
onSettled?: ('queryData, 'queryError) => unit,
25+
select?: 'queryData => 'queryData,
26+
suspense?: bool,
27+
keepPreviousData?: bool,
28+
structuralSharing?: bool,
29+
useErrorBoundary?: bool,
30+
initialData?: 'queryData => 'queryData,
31+
initialDataUpdatedAt?: unit => int,
32+
placeholderData?: unit => 'queryData,
33+
getNextPageParam?: 'queryData => option<int>,
34+
getPreviousPageParam?: 'queryData => option<int>,
3735
}
3836

39-
type rec infiniteQueryResult<'queryError, 'queryData, 'pageParam> = {
37+
type rec infiniteQueryResult<'queryError, 'queryData> = {
4038
status: ReactQuery_Types.queryStatus,
4139
isIdle: bool,
4240
isError: bool,
@@ -55,22 +53,21 @@ type rec infiniteQueryResult<'queryError, 'queryData, 'pageParam> = {
5553
errorUpdatedAt: int,
5654
failureCount: int,
5755
refetch: ReactQuery_Types.refetchOptions => Js.Promise.t<
58-
infiniteQueryResult<'queryError, 'queryData, 'pageParam>,
56+
infiniteQueryResult<'queryError, 'queryData>,
5957
>,
6058
remove: unit => unit,
61-
data: ReactQuery_Types.infiniteData<'queryData, 'pageParam>,
59+
data: option<ReactQuery_Types.infiniteData<'queryData>>,
6260
isFetchingNextPage: bool,
6361
isFetchingPreviousPage: bool,
64-
//fetchNextPage: (options?: FetchNextPageOptions) => Promise<UseInfiniteQueryResult>
62+
fetchNextPage: unit => unit,
6563
//fetchPreviousPage: (options?: FetchPreviousPageOptions) => Promise<UseInfiniteQueryResult>
6664
hasNextPage: bool,
6765
hasPreviousPage: bool,
6866
}
6967

70-
@module("react-query")
71-
external useQuery: infiniteQueryOptions<
68+
@module("@tanstack/react-query")
69+
external useInfiniteQuery: infiniteQueryOptions<
7270
'queryKey,
7371
'queryData,
7472
'queryError,
75-
'pageParam,
76-
> => infiniteQueryResult<'queryError, 'queryData, 'pageParam> = "useInfiniteQuery"
73+
> => infiniteQueryResult<'queryError, 'queryData> = "useInfiniteQuery"

‎src/ReactQuery_Mutation.res

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
type mutationContext
22

3-
type mutationStatus = [#loading | #success | #idle | #error]
3+
type mutationStatus = [#loading | #success | #error]
44

55
type mutateParams<'mutationVariables, 'mutationData, 'mutationError, 'unknown> = {
66
onSuccess: option<
@@ -21,7 +21,7 @@ type mutateParams<'mutationVariables, 'mutationData, 'mutationError, 'unknown> =
2121

2222
@deriving(abstract)
2323
type mutationOptions<'mutationVariables, 'mutationData, 'mutationError, 'unknown> = {
24-
mutationKey: string,
24+
mutationKey: array<string>,
2525
mutationFn: 'mutationVariables => Js.Promise.t<'mutationData>,
2626
@optional onMutate: 'mutationVariables => Js.Promise.t<mutationContext>,
2727
@optional
@@ -67,7 +67,7 @@ type mutationResult<'mutationVariables, 'mutationData, 'mutationError, 'unknown>
6767
reset: unit => unit,
6868
}
6969

70-
@module("react-query")
70+
@module("@tanstack/react-query")
7171
external useMutation: mutationOptions<
7272
'mutationVariables,
7373
'mutationData,

‎src/ReactQuery_Query.res

+30-30
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
1-
@deriving(abstract)
21
type queryOptions<'queryKey, 'queryData, 'queryError, 'pageParam> = {
3-
@optional queryKey: 'queryKey,
4-
@optional
5-
queryFn: ReactQuery_Types.queryFunctionContext<'queryKey, 'pageParam> => Js.Promise.t<'queryData>,
6-
@optional enabled: bool,
7-
@optional retry: ReactQuery_Types.retryValue<'queryError>,
8-
@optional retryOnMount: bool,
9-
@optional retryDelay: ReactQuery_Types.retryDelayValue<'queryError>,
10-
@optional staleTime: ReactQuery_Types.timeValue,
11-
@optional queryKeyHashFn: 'queryKey => string,
12-
@optional refetchInterval: ReactQuery_Types.refetchIntervalValue,
13-
@optional refetchIntervalInBackground: bool,
14-
@optional refetchOnMount: ReactQuery_Types.boolOrAlwaysValue,
15-
@optional refetchOnWindowFocus: ReactQuery_Types.boolOrAlwaysValue,
16-
@optional refetchOnReconnect: ReactQuery_Types.boolOrAlwaysValue,
17-
@optional notifyOnChangeProps: ReactQuery_Types.notifyOnChangePropsValue,
18-
@optional notifyOnChangePropsExclusions: array<string>,
19-
@optional onSuccess: 'queryData => unit,
20-
@optional onError: 'queryError => unit,
21-
@optional onSettled: ('queryData, 'queryError) => unit,
22-
@optional select: 'queryData => 'queryData,
23-
@optional suspense: bool,
24-
@optional keepPreviousData: bool,
25-
@optional structuralSharing: bool,
26-
@optional useErrorBoundary: bool,
27-
@optional initialData: 'queryData => 'queryData,
28-
@optional initialDataUpdatedAt: unit => int,
29-
@optional placeholderData: unit => 'queryData,
2+
queryKey?: array<'queryKey>,
3+
queryFn?: ReactQuery_Types.queryFunctionContext<array<'queryKey>, 'pageParam> => Js.Promise.t<
4+
'queryData,
5+
>,
6+
enabled?: bool,
7+
retry?: ReactQuery_Types.retryValue<'queryError>,
8+
retryOnMount?: bool,
9+
retryDelay?: ReactQuery_Types.retryDelayValue<'queryError>,
10+
staleTime?: ReactQuery_Types.timeValue,
11+
queryKeyHashFn?: array<'queryKey> => string,
12+
refetchInterval?: ReactQuery_Types.refetchIntervalValue,
13+
refetchIntervalInBackground?: bool,
14+
refetchOnMount?: ReactQuery_Types.boolOrAlwaysValue,
15+
refetchOnWindowFocus?: ReactQuery_Types.boolOrAlwaysValue,
16+
refetchOnReconnect?: ReactQuery_Types.boolOrAlwaysValue,
17+
notifyOnChangeProps?: ReactQuery_Types.notifyOnChangePropsValue,
18+
notifyOnChangePropsExclusions?: array<string>,
19+
onSuccess?: 'queryData => unit,
20+
onError?: 'queryError => unit,
21+
onSettled?: ('queryData, 'queryError) => unit,
22+
select?: 'queryData => 'queryData,
23+
suspense?: bool,
24+
keepPreviousData?: bool,
25+
structuralSharing?: bool,
26+
useErrorBoundary?: bool,
27+
initialData?: 'queryData => 'queryData,
28+
initialDataUpdatedAt?: unit => int,
29+
placeholderData?: unit => 'queryData,
3030
}
3131

3232
type rec queryResult<'queryError, 'queryData> = {
@@ -52,13 +52,13 @@ type rec queryResult<'queryError, 'queryData> = {
5252
remove: unit => unit,
5353
}
5454

55-
@module("react-query")
55+
@module("@tanstack/react-query")
5656
external useQuery: queryOptions<'queryKey, 'queryData, 'queryError, 'pageParam> => queryResult<
5757
'queryError,
5858
'queryData,
5959
> = "useQuery"
6060

61-
@module("react-query")
61+
@module("@tanstack/react-query")
6262
external useQueries: array<queryOptions<'queryKey, 'queryData, 'queryError, 'pageParam>> => array<
6363
queryResult<'queryError, 'queryData>,
6464
> = "useQueries"

‎src/ReactQuery_Types.res

+7-6
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,14 @@ type retryDelayParam<'error> = [#number(int) | #fn((int, 'error) => int)]
1818
type time = [#number(int) | #infinity]
1919
type refetchInterval = [#bool(bool) | #number(int)]
2020
type boolOrAlways = [#bool(bool) | #always]
21-
type notifyOnChangeProps = [#array(array<string>) | #tracked]
22-
type infiniteData<'queryData, 'pageParam> = {
21+
type notifyOnChangeProps = [#array(array<string>) | #all]
22+
23+
type infiniteData<'queryData> = {
2324
pages: array<'queryData>,
24-
pageParams: array<'pageParam>,
25+
pageParams: array<int>,
2526
}
26-
type queryStatus = [#loading | #success | #idle | #error | #initialData]
27+
28+
type queryStatus = [#loading | #success | #error | #initialData]
2729

2830
type placeholderData<'queryData, 'queryResult> = [
2931
| #data('queryData)
@@ -33,8 +35,7 @@ type placeholderData<'queryData, 'queryResult> = [
3335
@deriving(abstract)
3436
type queryFilter<'queryKey> = {
3537
@optional exact: bool,
36-
@optional active: bool,
37-
@optional inactive: bool,
38+
@optional @as("type") type_: [#active | #inactive | #all],
3839
@optional stale: bool,
3940
@optional fetching: bool,
4041
@optional predicate: query => bool,

0 commit comments

Comments
 (0)