Allow additional hook names with Eslint Plugin Query

[thespacemanatee]

Thank you for this wonderful library.

We are using this library in React Native and we are wrapping useQuery with some React Navigation stuff to get refetchOnWindowFocus working. However, the Eslint Plugin Query does not recognise these custom wrappers as Query hooks and does not validate them.

We would like to see an additionalHooks setting on the rules, similar to how React does it:

{
  "rules": {
    // ...
    "react-hooks/exhaustive-deps": ["warn", {
      "additionalHooks": "(useMyCustomHook|useMyOtherCustomHook)"
    }]
  }
}

Thank you very much for considering this feature request!

[TkDodo]

@Newbie012 what do you think ?

[Newbie012]

IIRC the way the rule works is by looking at objects containing both queryKey and queryFn, and the function that wraps them is imported from tanstack. This way, the rule doesn't have to worry if someone imported { useQuery as useReactQuery } or imported useQuery from other library, and as a result, newly introduced functions (such as createQuery and queryOptions) were supported out of the box.

I guess we could add the option to support custom hooks (without imports check), while keeping current behavior. This way, the responsibility of conflicts will be passed to the consumer.

thoughts?

[TkDodo]

Sounds good 👍

[Newbie012]

Apparently I don't check the imports. It's already working as long as an object contains both queryKey and queryFn: https://eslint-online-playground.netlify.app/#eNqNkEFrwzAMhf+K8CUtpAnbMaNj0LHLTjvXPYREKe5iOY3t0RLy3yfbZWQwRk+W0XufnjQJOzYlXmo99FicrKhE56lxyhDsjB4MIbnVBKrNwVv88DheY7Xz1hkd/zCvYZIE0BiyDs4PsP3RsvUc3ne8VrA/5On3RhWs1rB9Zi67nxbmx2Re4O9FzCIXaHtFrmBWp45pHcVLjA6G3h8VpbzdaDRkL67miXXzWSbXJkk2EZ9JkoSXaG2xq33vYB9iFkWxQN0m2X3W9bUrR2yM1kgtttkhl3SQxKEGnlEfw3UNcaB4KincdUApKq60aX3PNRtCo8WvVxwChBqFNmiiJfT+zZxonAOtu9GiJ0nLU0T9IUj9383Qm8NN528O0brm

[thespacemanatee]

Apparently I don't check the imports. It's already working as long as an object contains both queryKey and queryFn: https://eslint-online-playground.netlify.app/#eNqNkEFrwzAMhf+K8CUtpAnbMaNj0LHLTjvXPYREKe5iOY3t0RLy3yfbZWQwRk+W0XufnjQJOzYlXmo99FicrKhE56lxyhDsjB4MIbnVBKrNwVv88DheY7Xz1hkd/zCvYZIE0BiyDs4PsP3RsvUc3ne8VrA/5On3RhWs1rB9Zi67nxbmx2Re4O9FzCIXaHtFrmBWp45pHcVLjA6G3h8VpbzdaDRkL67miXXzWSbXJkk2EZ9JkoSXaG2xq33vYB9iFkWxQN0m2X3W9bUrR2yM1kgtttkhl3SQxKEGnlEfw3UNcaB4KincdUApKq60aX3PNRtCo8WvVxwChBqFNmiiJfT+zZxonAOtu9GiJ0nLU0T9IUj9383Qm8NN528O0brm

I just tried in my setup and it doesn't work if the wrapper has a different name like useFocusEffectQuery and isn't exported from the official library.

EDIT: Saw the playground and I agree that there's no reason it shouldn't work, I'll take a look at my setup again, thanks!

[kennygrubb]

Some rules, like no-rest-destructuring, do not fire in this scenario.

A common use-case is using the TRPC react-query wrappers ... would really like to be able to use this eslint plugin with it.

[Newbie012]

I'm not sure what you mean. This rule applies in other syntaxes such as trpc.hello.useQuery({ queryKey: [], queryFn: () => id }).

[kennygrubb]

TRPC handles internally the queryKey and queryFn, so those are not required when calling useQuery

https://trpc.io/docs/client/react/useQuery