sbkl•2d ago

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,
  });
}

"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,
  });
}

2 Replies

Convex Bot•2d ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

sbklOP•2d ago

useMutation

"use client";

import type {
  UseMutationOptions,
  UseMutationResult,
} from "@tanstack/react-query";
import type {
  FunctionArgs,
  FunctionReference,
  FunctionReturnType,
} from "convex/server";

import { useConvexMutation } from "@convex-dev/react-query";
import { useMutation as useTanstackMutation } from "@tanstack/react-query";

export function useMutation<
  Mutation extends FunctionReference<"mutation">,
  Args extends FunctionArgs<Mutation>,
  ReturnType extends FunctionReturnType<Mutation>,
>(
  mutation: Mutation,
  options?: Omit<UseMutationOptions<ReturnType, Error, Args>, "mutationFn">
): UseMutationResult<ReturnType, Error, Args> {
  const convexMutation = useConvexMutation(mutation);
  return useTanstackMutation<ReturnType, Error, Args>({
    mutationFn: (args) => convexMutation(args),
    ...(options ?? {}),
  });
}

"use client";

import type {
  UseMutationOptions,
  UseMutationResult,
} from "@tanstack/react-query";
import type {
  FunctionArgs,
  FunctionReference,
  FunctionReturnType,
} from "convex/server";

import { useConvexMutation } from "@convex-dev/react-query";
import { useMutation as useTanstackMutation } from "@tanstack/react-query";

export function useMutation<
  Mutation extends FunctionReference<"mutation">,
  Args extends FunctionArgs<Mutation>,
  ReturnType extends FunctionReturnType<Mutation>,
>(
  mutation: Mutation,
  options?: Omit<UseMutationOptions<ReturnType, Error, Args>, "mutationFn">
): UseMutationResult<ReturnType, Error, Args> {
  const convexMutation = useConvexMutation(mutation);
  return useTanstackMutation<ReturnType, Error, Args>({
    mutationFn: (args) => convexMutation(args),
    ...(options ?? {}),
  });
}

usage for query

const { data, isPending } = useQuery(api.tableName.query.find, { ...args });

const { data, isPending } = useQuery(api.tableName.query.find, { ...args });

for mutation

  const mutation = useMutation(api.tableName.mutation.create, {
    onSettled() {
      router.push(redirectUrl);
      toast.success("Item created");
    },
    onError() {
      toast.error("Failed to create item");
    },
  });
// how to use
mutation.mutate(args);

// can use
mutation.isPending
// for example

  const mutation = useMutation(api.tableName.mutation.create, {
    onSettled() {
      router.push(redirectUrl);
      toast.success("Item created");
    },
    onError() {
      toast.error("Failed to create item");
    },
  });
// how to use
mutation.mutate(args);

// can use
mutation.isPending
// for example

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

Did you find this page helpful?