Generic Query and Mutations

My issue is this: I repeat same or quite close things a lot eg.

import { useQuery } from 'convex/react';
import { api } from '../../../../convex/_generated/api';

export const useGetExamples = () => {
    const data = useQuery(api.example.getExamples);
    const isLoading = data === undefined;

    return { data, isLoading };
};

import { useQuery } from 'convex/react';
import { api } from '../../../../convex/_generated/api';

export const useGetExamples = () => {
    const data = useQuery(api.example.getExamples);
    const isLoading = data === undefined;

    return { data, isLoading };
};

5 Replies

Convex Bot•2w 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!

besimkingOP•2w ago

import { useMutation } from "convex/react";
import { useCallback, useMemo, useState } from "react";
import { Id } from "../../../../convex/_generated/dataModel";
import { api } from "../../../../convex/_generated/api";


type ResponseType = Id<"restaurants"> | null;
type RequestType = {
  name: string;
  text: string;

};

type Options = {
  onSuccess?: (data: ResponseType) => void;
  onError?: (error: Error) => void;
  onSettled?: () => void;
  throwError?: boolean;
};

export const useCreateExample = () => {
  const [data, setData] = useState<ResponseType>(null);
  const [error, setError] = useState<Error | null>(null);

  const [status, setStatus] = useState<
    "success" | "error" | "settled" | "pending" | null
  >(null);

  const isPending = useMemo(() => status === "pending", [status]);
  const isSuccess = useMemo(() => status === "success", [status]);
  const isError = useMemo(() => status === "error", [status]);
  const isSettled = useMemo(() => status === "settled", [status]);

  const mutation = useMutation(api.examples.createExamples);

  const mutate = useCallback(
    async (values: RequestType, options?: Options) => {
      try {
        setData(null);
        setError(null);
        setStatus("pending");

        const response = await mutation({
          name: values.name,
          currency: values.currency,
          image: values.image,
        });
        options?.onSuccess?.(response);
        return response;
      } catch (error) {
        setStatus("error");
        options?.onError?.(error as Error);
        if (options?.throwError) {
          throw error;
        }
      } finally {
        setStatus("settled");
        options?.onSettled?.();
      }
    },
    [mutation],
  );

  return { mutate, data, error, isPending, isSuccess, isError, isSettled };
};

import { useMutation } from "convex/react";
import { useCallback, useMemo, useState } from "react";
import { Id } from "../../../../convex/_generated/dataModel";
import { api } from "../../../../convex/_generated/api";


type ResponseType = Id<"restaurants"> | null;
type RequestType = {
  name: string;
  text: string;

};

type Options = {
  onSuccess?: (data: ResponseType) => void;
  onError?: (error: Error) => void;
  onSettled?: () => void;
  throwError?: boolean;
};

export const useCreateExample = () => {
  const [data, setData] = useState<ResponseType>(null);
  const [error, setError] = useState<Error | null>(null);

  const [status, setStatus] = useState<
    "success" | "error" | "settled" | "pending" | null
  >(null);

  const isPending = useMemo(() => status === "pending", [status]);
  const isSuccess = useMemo(() => status === "success", [status]);
  const isError = useMemo(() => status === "error", [status]);
  const isSettled = useMemo(() => status === "settled", [status]);

  const mutation = useMutation(api.examples.createExamples);

  const mutate = useCallback(
    async (values: RequestType, options?: Options) => {
      try {
        setData(null);
        setError(null);
        setStatus("pending");

        const response = await mutation({
          name: values.name,
          currency: values.currency,
          image: values.image,
        });
        options?.onSuccess?.(response);
        return response;
      } catch (error) {
        setStatus("error");
        options?.onError?.(error as Error);
        if (options?.throwError) {
          throw error;
        }
      } finally {
        setStatus("settled");
        options?.onSettled?.();
      }
    },
    [mutation],
  );

  return { mutate, data, error, isPending, isSuccess, isError, isSettled };
};

I need a structure like

const { data, isPending } = useConvexQuery(api.example.getExamples);

const { mutate, isPending } = useConvexMutation(api.example.createExamples);  

const { mutate, isPending } = useConvexMutation(api.example.editExamples,{name:"Something",text:"Another Thing");

const { data, isPending } = useConvexQuery(api.example.getExamples);

const { mutate, isPending } = useConvexMutation(api.example.createExamples);  

const { mutate, isPending } = useConvexMutation(api.example.editExamples,{name:"Something",text:"Another Thing");

Has anyone done something like this before?

erquhart•2w ago

Right here: https://www.npmjs.com/package/convex-helpers#richer-usequery

lee•2w ago

For mutations it sounds like you want a pattern like https://docs.convex.dev/client/tanstack-query#mutations . If you don't want to use tanstack, the hook doesn't seem difficult to write yourself

Convex with TanStack Query | Convex Developer Hub

TanStack Query is an excellent, popular

besimkingOP•2w ago

@erquhart @Lee Thanks a lot! You are the best

Generic Query and Mutations

Did you find this page helpful?