sbklS
Convex Community3mo ago
3 replies
sbkl

This is how I integrate convex with tanstack query. What do you think?

useQuery
"use client";

import { convexQuery } from "@convex-dev/react-query";
import {
  UseQueryOptions,
  useQuery as useTanstackQuery,
} from "@tanstack/react-query";
import type {
  FunctionArgs,
  FunctionReference,
  FunctionReturnType,
} from "convex/server";

export function useQuery<
  Query extends FunctionReference<"query">,
  Args extends FunctionArgs<Query> | "skip",
  ReturnType extends FunctionReturnType<Query>,
>(
  query: Query,
  args: Args,
  options?: Args extends "skip"
    ? Omit<
        UseQueryOptions<
          ReturnType,
          Error,
          ReturnType,
          ["convexQuery", Query, FunctionArgs<Query>]
        >,
        "queryKey" | "queryFn" | "staleTime" | "enabled"
      >
    : Omit<
        UseQueryOptions<
          ReturnType,
          Error,
          ReturnType,
          ["convexQuery", Query, FunctionArgs<Query>]
        >,
        "queryKey" | "queryFn" | "staleTime"
      >
) {
  return useTanstackQuery<ReturnType, Error, ReturnType>({
    ...(convexQuery(query, args) as unknown as UseQueryOptions<
      ReturnType,
      Error,
      ReturnType,
      readonly unknown[]
    >),
    ...((options ?? {}) as unknown as Omit<
      UseQueryOptions<ReturnType, Error, ReturnType, readonly unknown[]>,
      "queryKey" | "queryFn" | "staleTime"
    >),
    placeholderData: (data) => data,
  });
}
Was this page helpful?