chore: added experimental bindings to @tanstack/query@v4

Author: vmarcosp

.npmignore

@@ -0,0 +1,2 @@
+examples/
+assets/

examples/package.json

@@ -12,14 +12,14 @@
     "@rescript/react": "0.10.3",
     "@rescriptbr/react-query": "../",
     "@ryyppy/rescript-promise": "2.1.0",
-    "@vitejs/plugin-react": "1.0.1",
+    "@vitejs/plugin-react": "2.0.1",
     "react": "17.0.0",
     "react-dom": "17.0.0",
-    "react-query": "^3.25.0",
-    "rescript": "9.1.4",
+    "@tanstack/react-query": "4.2.1",
+    "rescript": "10.0.1",
     "web-vitals": "2.0.1"
   },
   "devDependencies": {
-    "vite": "2.3.8"
+    "vite": "3.0.9"
   }
 }

examples/src/App.res

@@ -16,18 +16,15 @@ let fetchTodos = (_): Js.Promise.t<todo> => {
 module TodoItem = {
   @react.component
   let make = () => {
-    let queryResult = ReactQuery.useQuery(
-      ReactQuery.queryOptions(
-        ~queryFn=fetchTodos,
-        ~queryKey="todos",
-        /*
-         * Helper functions to convert unsupported TypeScript types in ReScript
-         * Check out the module ReactQuery_Utils.res
-         */
-        ~refetchOnWindowFocus=ReactQuery.refetchOnWindowFocus(#bool(false)),
-        (),
-      ),
-    )
+    let queryResult = ReactQuery.useQuery({
+      queryFn: fetchTodos,
+      queryKey: ["todos"],
+      /*
+       * Helper functions to convert unsupported TypeScript types in ReScript
+       * Check out the module ReactQuery_Utils.res
+       */
+      refetchOnWindowFocus: ReactQuery.refetchOnWindowFocus(#bool(false)),
+    })
 
     <div>
       {switch queryResult {
@@ -48,6 +45,9 @@ let client = ReactQuery.Provider.createClient()
 @react.component
 let make = () => {
   <ReactQuery.Provider client>
-    <div> <h1> {React.string("ReScript + React Query")} </h1> <TodoItem /> </div>
+    <div>
+      <h1> {React.string("ReScript + React Query")} </h1>
+      <TodoItem />
+    </div>
   </ReactQuery.Provider>
 }

examples/yarn.lock

@@ -12,12 +12,13 @@
     "@rescript/react": "0.10.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "rescript": "9.1.4"
+    "rescript": "10.0.1"
   },
   "peerDependencies": {
-    "@rescript/react": "^0.10.3",
+    "@rescript/react": ">=0.10.3",
     "react": ">=17.0.2",
-    "react-dom": ">=17.0.2"
+    "react-dom": ">=17.0.2",
+    "rescript": ">=10.0.1"
   },
   "scripts": {
     "rescript:build": "rescript build -with-deps",

package.json

@@ -1,6 +1,10 @@
-module InfiniteQuery = ReactQuery_InfiniteQuery
+include ReactQuery_InfiniteQuery
 include ReactQuery_Query
 include ReactQuery_Mutation
 include ReactQuery_Hooks
 include ReactQuery_Utils
 include ReactQuery_Client
+module DevTools = {
+  @react.component @module("@tanstack/react-query-devtools")
+  external make: (~initialIsOpen: bool=?) => React.element = "ReactQueryDevtools"
+}

src/ReactQuery.res

@@ -82,10 +82,7 @@ type defaultOptions<'error, 'data, 'queryData, 'queryKey, 'pageParam> = {
   queries: option<queryObserverOptions<'error, 'data, 'queryData, 'queryKey, 'pageParam>>,
 }
 
-type invalidateQueryFilter = {
-  refetchActive: option<bool>,
-  refetchInactive: option<bool>,
-}
+type invalidateQueryFilter = {refetchType: [#active | #inactive | #all | #none]}
 
 type clientRefetchOptions = {throwOnError: option<bool>}
 
@@ -146,7 +143,7 @@ type queryClient<'queryKey, 'queryData, 'queryError, 'pageParams> = {
     'queryData,
     'queryError,
     'pageParams,
-  > => Js.Promise.t<ReactQuery_Types.infiniteData<'queryData, 'pageParams>>,
+  > => Js.Promise.t<ReactQuery_Types.infiniteData<'queryData>>,
   prefetchQuery: fetchQueryOptions<'queryKey, 'queryData, 'queryError, 'pageParams> => Js.Promise.t<
     unit,
   >,
@@ -193,15 +190,15 @@ type queryClient<'queryKey, 'queryData, 'queryError, 'pageParams> = {
   clear: unit => unit,
 }
 
-@module("react-query")
+@module("@tanstack/react-query")
 external useQueryClient: unit => queryClient<'queryKey, 'queryData, 'queryError, 'pageParams> =
   "useQueryClient"
 
 module Provider = {
-  @new @module("react-query")
+  @new @module("@tanstack/react-query")
   external createClient: unit => queryClientValue = "QueryClient"
 
-  @module("react-query") @react.component
+  @module("@tanstack/react-query") @react.component
   external make: (
     ~client: queryClientValue,
     ~contextSharing: bool=?,

src/ReactQuery_Client.res

@@ -1,14 +1,14 @@
 type resetErrorBoundary = {reset: unit => unit}
 
-@module("react-query")
+@module("@tanstack/react-query")
 external useIsFetching: unit => bool = "useIsFetching"
 
-@module("react-query") external useIsFetchingWithKeys: 'queryKey => bool = "useIsFetching"
+@module("@tanstack/react-query") external useIsFetchingWithKeys: 'queryKey => bool = "useIsFetching"
 
-@module("react-query")
+@module("@tanstack/react-query")
 external useIsMutating: unit => bool = "useIsMutating"
 
-@module("react-query") external useIsMutatingWithKeys: 'queryKey => bool = "useIsMutating"
+@module("@tanstack/react-query") external useIsMutatingWithKeys: 'queryKey => bool = "useIsMutating"
 
-@module("react-query")
+@module("@tanstack/react-query")
 external useQueryErrorResetBoundary: unit => resetErrorBoundary = "useQueryErrorResetBoundary"

src/ReactQuery_Hooks.res

@@ -1,42 +1,40 @@
-type inifiniteQueryFunctionContext<'queryKey, 'pageParam> = {
-  queryKey: array<'queryKey>,
-  pageParam: option<'pageParam>,
+type inifiniteQueryFunctionContext<'queryKey> = {
+  queryKey: 'queryKey,
+  pageParam: option<int>,
 }
 
-@deriving(abstract)
-type infiniteQueryOptions<'queryKey, 'queryData, 'queryError, 'pageParam> = {
-  @optional queryKey: 'queryKey,
-  @optional
-  queryFn: inifiniteQueryFunctionContext<'queryKey, 'pageParam> => Js.Promise.t<'queryData>,
-  @optional enabled: bool,
-  @optional retry: ReactQuery_Types.retryValue<'queryError>,
-  @optional retryOnMount: bool,
-  @optional retryDelay: ReactQuery_Types.retryDelayValue<'queryError>,
-  @optional staleTime: ReactQuery_Types.timeValue,
-  @optional queryKeyHashFn: 'queryKey => string,
-  @optional refetchInterval: ReactQuery_Types.refetchIntervalValue,
-  @optional refetchIntervalInBackground: bool,
-  @optional refetchOnMount: ReactQuery_Types.boolOrAlwaysValue,
-  @optional refetchOnWindowFocus: ReactQuery_Types.boolOrAlwaysValue,
-  @optional refetchOnReconnect: ReactQuery_Types.boolOrAlwaysValue,
-  @optional notifyOnChangeProps: ReactQuery_Types.notifyOnChangePropsValue,
-  @optional notifyOnChangePropsExclusions: array<string>,
-  @optional onSuccess: 'queryData => unit,
-  @optional onError: 'queryError => unit,
-  @optional onSettled: ('queryData, 'queryError) => unit,
-  @optional select: 'queryData => 'queryData,
-  @optional suspense: bool,
-  @optional keepPreviousData: bool,
-  @optional structuralSharing: bool,
-  @optional useErrorBoundary: bool,
-  @optional initialData: 'queryData => 'queryData,
-  @optional initialDataUpdatedAt: unit => int,
-  @optional placeholderData: unit => 'queryData,
-  @optional getNextPageParam: ('pageParam, array<'pageParam>) => option<'pageParam>,
-  @optional getPreviousPageParam: ('pageParam, array<'pageParam>) => option<'pageParam>,
+type infiniteQueryOptions<'queryKey, 'queryData, 'queryError> = {
+  queryKey?: 'queryKey,
+  queryFn?: inifiniteQueryFunctionContext<'queryKey> => Js.Promise.t<'queryData>,
+  enabled?: bool,
+  retry?: ReactQuery_Types.retryValue<'queryError>,
+  retryOnMount?: bool,
+  retryDelay?: ReactQuery_Types.retryDelayValue<'queryError>,
+  staleTime?: ReactQuery_Types.timeValue,
+  queryKeyHashFn?: 'queryKey => string,
+  refetchInterval?: ReactQuery_Types.refetchIntervalValue,
+  refetchIntervalInBackground?: bool,
+  refetchOnMount?: ReactQuery_Types.boolOrAlwaysValue,
+  refetchOnWindowFocus?: ReactQuery_Types.boolOrAlwaysValue,
+  refetchOnReconnect?: ReactQuery_Types.boolOrAlwaysValue,
+  notifyOnChangeProps?: ReactQuery_Types.notifyOnChangePropsValue,
+  notifyOnChangePropsExclusions?: array<string>,
+  onSuccess?: 'queryData => unit,
+  onError?: 'queryError => unit,
+  onSettled?: ('queryData, 'queryError) => unit,
+  select?: 'queryData => 'queryData,
+  suspense?: bool,
+  keepPreviousData?: bool,
+  structuralSharing?: bool,
+  useErrorBoundary?: bool,
+  initialData?: 'queryData => 'queryData,
+  initialDataUpdatedAt?: unit => int,
+  placeholderData?: unit => 'queryData,
+  getNextPageParam?: 'queryData => option<int>,
+  getPreviousPageParam?: 'queryData => option<int>,
 }
 
-type rec infiniteQueryResult<'queryError, 'queryData, 'pageParam> = {
+type rec infiniteQueryResult<'queryError, 'queryData> = {
   status: ReactQuery_Types.queryStatus,
   isIdle: bool,
   isError: bool,
@@ -55,22 +53,21 @@ type rec infiniteQueryResult<'queryError, 'queryData, 'pageParam> = {
   errorUpdatedAt: int,
   failureCount: int,
   refetch: ReactQuery_Types.refetchOptions => Js.Promise.t<
-    infiniteQueryResult<'queryError, 'queryData, 'pageParam>,
+    infiniteQueryResult<'queryError, 'queryData>,
   >,
   remove: unit => unit,
-  data: ReactQuery_Types.infiniteData<'queryData, 'pageParam>,
+  data: option<ReactQuery_Types.infiniteData<'queryData>>,
   isFetchingNextPage: bool,
   isFetchingPreviousPage: bool,
-  //fetchNextPage: (options?: FetchNextPageOptions) => Promise<UseInfiniteQueryResult>
+  fetchNextPage: unit => unit,
   //fetchPreviousPage: (options?: FetchPreviousPageOptions) => Promise<UseInfiniteQueryResult>
   hasNextPage: bool,
   hasPreviousPage: bool,
 }
 
-@module("react-query")
-external useQuery: infiniteQueryOptions<
+@module("@tanstack/react-query")
+external useInfiniteQuery: infiniteQueryOptions<
   'queryKey,
   'queryData,
   'queryError,
-  'pageParam,
-> => infiniteQueryResult<'queryError, 'queryData, 'pageParam> = "useInfiniteQuery"
+> => infiniteQueryResult<'queryError, 'queryData> = "useInfiniteQuery"

src/ReactQuery_InfiniteQuery.res

@@ -1,6 +1,6 @@
 type mutationContext
 
-type mutationStatus = [#loading | #success | #idle | #error]
+type mutationStatus = [#loading | #success | #error]
 
 type mutateParams<'mutationVariables, 'mutationData, 'mutationError, 'unknown> = {
   onSuccess: option<
@@ -21,7 +21,7 @@ type mutateParams<'mutationVariables, 'mutationData, 'mutationError, 'unknown> =
 
 @deriving(abstract)
 type mutationOptions<'mutationVariables, 'mutationData, 'mutationError, 'unknown> = {
-  mutationKey: string,
+  mutationKey: array<string>,
   mutationFn: 'mutationVariables => Js.Promise.t<'mutationData>,
   @optional onMutate: 'mutationVariables => Js.Promise.t<mutationContext>,
   @optional
@@ -67,7 +67,7 @@ type mutationResult<'mutationVariables, 'mutationData, 'mutationError, 'unknown>
   reset: unit => unit,
 }
 
-@module("react-query")
+@module("@tanstack/react-query")
 external useMutation: mutationOptions<
   'mutationVariables,
   'mutationData,