How to import type definition from react-query to set type of options for useQuery hook?

Viewed 10

I'm adding react-query to my automations pipe and need generating wrapper around the useQuery for various API calls. I want to expose all options of useQuery to developer using this wrapper. How to correctly define options type to get all the benefits of ts for those?

:any works but not giving autocomplete/checks then:

const usePosts = ({ page, perPage, workspaceId }: payload, ___options?: any) => {

If I add :UseQueryOptions, just to see the error of mismatch, error message is quite big and has a lot inside. Would love to find way to import that type definition from react-query and reuse it.

enter image description here enter image description here

1 Answers

Just found it, sometimes all needed is to write a question Maybe someone else will benefit from this:

import { useQuery, QueryOptions } from "@tanstack/react-query";
import sdk from "../sdks/demo";

type payload = {
  page?: number;
  perPage?: number;
  workspaceId: string;
};

const usePosts = (
  { page, perPage, workspaceId }: payload,
  ___options?: QueryOptions
) => {
  let key = `posts-list-${workspaceId}-${page}-${perPage}`;
  return useQuery(
    [key],
    () =>
      sdk.postsList({
        workspaceId,
        page,
        perPage,
      }),
    ___options
  );
};

export default usePosts;

enter image description here

Related