4 replies

Reuseable query hook

Hi everyone

Looking into some best practices for reusing mutations and queries. Primarily so I don't have to import from _generated/api every time I need a query/mutation, but also to reuse some states like loading or reuse some toast notifications on mutations.

Saw this message as an example of what folks do: A more clean way to know when a query is loading, or failed?

So I am sharing my simple example here, is this OK, is there any new practice you would recommend for creating reuseable queries?

import { useQuery } from "convex/react";

import { api } from "@/convex/_generated/api";

interface UseQueryBoardsProps {
  orgId: string;
};

export const useQueryBoards = ({
  orgId,
}: UseQueryBoardsProps) => {
  const data = useQuery(api.boards.getBoards, { orgId });

  const loading = data === undefined;

  return {
    data,
    loading,
  };
};

import { useQuery } from "convex/react";

import { api } from "@/convex/_generated/api";

interface UseQueryBoardsProps {
  orgId: string;
};

export const useQueryBoards = ({
  orgId,
}: UseQueryBoardsProps) => {
  const data = useQuery(api.boards.getBoards, { orgId });

  const loading = data === undefined;

  return {
    data,
    loading,
  };
};

import { useQuery } from "convex/react";

import { api } from "@/convex/_generated/api";

interface UseQueryBoardsProps {
  orgId: string;
};

export const useQueryBoards = ({
  orgId,
}: UseQueryBoardsProps) => {
  const data = useQuery(api.boards.getBoards, { orgId });

  const loading = data === undefined;

  return {
    data,
    loading,
  };
};

import { useQuery } from "convex/react";

import { api } from "@/convex/_generated/api";

interface UseQueryBoardsProps {
  orgId: string;
};

export const useQueryBoards = ({
  orgId,
}: UseQueryBoardsProps) => {
  const data = useQuery(api.boards.getBoards, { orgId });

  const loading = data === undefined;

  return {
    data,
    loading,
  };
};

Reuseable query hook

Similar Threads

Similar Threads

Similar Threads