Add VS Code Intellisense to custom useQuery Hook

[rohitpotato]

I have created a custom hook based off of useQuery like this:

export default function useQueryHook({
  key,
  url,
  id = undefined,
  config = {},
}) {
  const token = useAuthStore(tokenSelector);
  let enabled = !!token;
  if (id) {
    enabled = Boolean(id && token);
  }
  const queryData = useQuery(key, () => request.get(url), {
    enabled,
    ...config,
  });

  return queryData;
}

I want to add intellisense for the config object like react-query does for the options object.

I have tried importing UseQueryOptions from react-query/types/react/types and adding JSDoc like this.

/**
* @param {{
  key: number
  url: number
  id: string
  config: {useQueryOptions}
}} param0
*/

But I end up getting an import error. Is there any way around this?

Just straight out of the way I want to mention that I am a complete stranger to typescript.

Any help is highly appreciated. Thanks!

[TkDodo]

I think you can import useQueryOptions directly from react-query, but maybe this only works in typescript:
https://github.com/tannerlinsley/react-query/blob/master/examples/optimistic-updates-typescript/pages/index.tsx#L10

[rohitpotato]

This actually worked! I'll post my solution here in case anybody needs it.

import { useQuery, UseQueryOptions, QueryKey } from "react-query";

/**
 *
 * @param {object} param -
 * @param {QueryKey} param.key = Unique Query Key for your query similar to react-query
 * @param {string} param.url - Url for your query
 * @param {string} param.id- Second value - Pass any ID to your query
 * @param {UseQueryOptions} param.config - Config for query similar to react-query options object
 */

 export default useQueryHook() {
 ...
 }

[fatlard1993]

I had similar requirements, but I also use eslint no-unused-vars, so the above solution was throwing lint errors which I'd have to override. I ended up using the jsdoc import pattern:

/**
 * @type {( config: {
 *  verb: 'get'|'post'|'put'|'patch'|'delete',
 *  key: import('react-query').QueryKey,
 *  rbac: String|Boolean,
 *  urlParams: Object,
 *  payload: Object,
 *  query: Object,
 *  options: import('react-query'). UseQueryOptions
 * }) => import('react-query').UseQueryResult}
 */

[sbogdaniuk]

I did this, just reimported type definition

/**
 * @typedef {import(react-query).UseQueryResult} UseQueryResult
 */

/**
 * ReactQuery wrapper to fetch categories info
 * @param {string} category - category
 * @param {object} options - extra params
 * @returns {UseQueryResult<{label: string, value: string}[], unknown>} result
 */