rustclan•11mo ago

Best way to update a TRPC useQuery response without refetching

Hey, I currently have a trpc useQuery endpoint which retrieves a series of form submissions for a user to review. I have a mutation which allows the user to delete a specific submission, which is working fine. However, I'm wondering what the best way of updating the submissions after I have just deleted the submission in question? I don't want to refetch the entire list of submissions as thats not very efficient, it would be best to just delete the specific submission from the submissions list if the delete mutation suceeded.

  const { data: submissions } =
    api.applications.applicationSubmissions.useQuery(
      {
        guildId: guildId as string,
        status: status,
        userId: undefined,
        applicationName: '',
      },
      { enabled: !!guildId }
    );

  return (
          {submissions?.map((submission) => {
          return (
            <ApplicationContainer submission={submission} guildId={guildId} />
          );
)

  const { data: submissions } =
    api.applications.applicationSubmissions.useQuery(
      {
        guildId: guildId as string,
        status: status,
        userId: undefined,
        applicationName: '',
      },
      { enabled: !!guildId }
    );

  return (
          {submissions?.map((submission) => {
          return (
            <ApplicationContainer submission={submission} guildId={guildId} />
          );
)

const ApplicationContainer = ({
  submission,
  guildId,
}: ApplicationContainerProps) => {
  const theme = useMantineTheme();
  const deleteSubmissionMutation =
    api.applications.deleteSubmission.useMutation<{
      guildId: string;
      submissionId: string;
    }>({});

  const handleDeleteSubmission = async (submissionId: string) => {
    const response = await deleteSubmissionMutation.mutateAsync({
      guildId: guildId,
      submissionId: submissionId,
    });
    // somehow remove the submissionId from the submissions variable without refetching the entire submission list again.

const ApplicationContainer = ({
  submission,
  guildId,
}: ApplicationContainerProps) => {
  const theme = useMantineTheme();
  const deleteSubmissionMutation =
    api.applications.deleteSubmission.useMutation<{
      guildId: string;
      submissionId: string;
    }>({});

  const handleDeleteSubmission = async (submissionId: string) => {
    const response = await deleteSubmissionMutation.mutateAsync({
      guildId: guildId,
      submissionId: submissionId,
    });
    // somehow remove the submissionId from the submissions variable without refetching the entire submission list again.

0 Replies

No replies yetBe the first to reply to this messageJoin

Best way to update a TRPC useQuery response without refetching

Did you find this page helpful?