Possible solution for exhaustive deps

packages/realm-react/.eslintrc.json

@@ -8,7 +8,12 @@
   "rules": {
     "@typescript-eslint/explicit-function-return-type": "off",
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn",
+    "react-hooks/exhaustive-deps": [
+      "warn",
+      {
+        "additionalHooks": "(^useQuery$)"
+      }
+    ],
     "jsdoc/check-tag-names": "off",
     "jsdoc/require-jsdoc": "off",
     "jsdoc/require-returns": "off",

packages/realm-react/src/RealmProvider.tsx

@@ -123,7 +123,7 @@ export function createRealmProvider(
       if (realmRef) {
         realmRef.current = realm;
       }
-    }, [realm]);
+    }, [realm, realmRef]);
 
     useEffect(() => {
       const realmRef = currentRealm.current;

packages/realm-react/src/__tests__/useQueryHook.test.tsx

@@ -112,4 +112,22 @@ describe("useQueryHook", () => {
 
     expect(collection[99]).toBe(undefined);
   });
+
+  it("should support reversed order of arguments for exhausive deps", () => {
+    // Eslint will trigger warning here with
+    // 120:92  warning  React Hook useQuery has a missing dependency: 'gender'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+    // which is correct behaviour.
+    const { result } = renderHook(
+      ({ gender }) => useQuery<IDog>((objects) => objects.filtered("gender = $0", gender), [], "dog"),
+      {
+        initialProps: { gender: "male" },
+      },
+    );
+    const collection = result.current;
+
+    expect(collection).not.toBeNull();
+    expect(collection.length).toBe(2);
+    expect(collection[0]).toMatchObject(testDataSet[0]);
+    expect(collection[1]).toMatchObject(testDataSet[3]);
+  });
 });

packages/realm-react/src/index.tsx

@@ -218,3 +218,5 @@ export { useUser, UserProvider } from "./UserProvider";
 export * from "./useAuth";
 export * from "./useEmailPasswordAuth";
 export * from "./types";
+export * from "./useQuery";
+export * from "./useObject";

packages/realm-react/src/useQuery.tsx

@@ -25,12 +25,36 @@ type RealmClassType<T = any> = { new (...args: any): T };
 type QueryCallback<T> = (collection: Realm.Results<T>) => Realm.Results<T>;
 type DependencyList = ReadonlyArray<unknown>;
 
+function simplifyArguments<T extends Realm.Object<any>>(
+  typeOrQuery: string | RealmClassType<T> | QueryCallback<T>,
+  queryOrDeps: QueryCallback<T> | DependencyList = (collection: Realm.Results<T>) => collection,
+  depsOrType: DependencyList | string | RealmClassType<T> = [],
+): { type: string | RealmClassType<T>; query: QueryCallback<T>; deps: DependencyList } {
+  if (Array.isArray(queryOrDeps)) {
+    return {
+      type: depsOrType as unknown as string | RealmClassType<T>,
+      query: typeOrQuery as unknown as QueryCallback<T>,
+      deps: queryOrDeps as unknown as DependencyList,
+    };
+  }
+  return {
+    type: typeOrQuery as unknown as string | RealmClassType<T>,
+    query: queryOrDeps as unknown as QueryCallback<T>,
+    deps: depsOrType as unknown as DependencyList,
+  };
+}
 /**
  * Generates the `useQuery` hook from a given `useRealm` hook.
  * @param useRealm - Hook that returns an open Realm instance
  * @returns useObject - Hook that is used to gain access to a {@link Realm.Collection}
  */
 export function createUseQuery(useRealm: () => Realm) {
+  function useQuery<T>(query: QueryCallback<T>, deps: DependencyList, type: string): Realm.Results<T & Realm.Object<T>>;
+  function useQuery<T extends Realm.Object<any>>(
+    query: QueryCallback<T>,
+    deps: DependencyList,
+    type: RealmClassType<T>,
+  ): Realm.Results<T & Realm.Object<T>>;
   function useQuery<T>(
     type: string,
     query?: QueryCallback<T>,
@@ -42,10 +66,11 @@ export function createUseQuery(useRealm: () => Realm) {
     deps?: DependencyList,
   ): Realm.Results<T>;
   function useQuery<T extends Realm.Object<any>>(
-    type: string | RealmClassType<T>,
-    query: QueryCallback<T> = (collection: Realm.Results<T>) => collection,
-    deps: DependencyList = [],
+    typeOrQuery: string | RealmClassType<T> | QueryCallback<T>,
+    queryOrDeps: QueryCallback<T> | DependencyList = (collection: Realm.Results<T>) => collection,
+    depsOrType: DependencyList | string | RealmClassType<T> = [],
   ): Realm.Results<T> {
+    const { type, query, deps } = simplifyArguments(typeOrQuery, queryOrDeps, depsOrType);
     const realm = useRealm();
 
     // We need to add the type to the deps, so that if the type changes, the query will be re-run.
@@ -62,6 +87,7 @@ export function createUseQuery(useRealm: () => Realm) {
     // We want the user of this hook to be able pass in the `query` function inline (without the need to `useCallback` on it)
     // This means that the query function is unstable and will be a redefined on each render of the component where `useQuery` is used
     // Therefore we use the `deps` array to memoize the query function internally, and only use the returned `queryCallback`
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const queryCallback = useCallback(query, [...deps, ...requiredDeps]);
 
     // If the query function changes, we need to update the cachedCollection