Best way to update a TRPC useQuery response without refetching

 To efficiently update the submissions list after deleting a specific submission without refetching the entire list, you can follow these steps:

1. Use the onSuccess callback of the mutation to update the local state.
2. Remove the deleted submission from the local state.

Here's an example of how you can modify your code:

const SubmissionsList = ({ guildId, status }) => { const { data: submissions, refetch } = api.applications.applicationSubmissions.useQuery( { guildId: guildId as string, status: status, userId: undefined, applicationName: '', }, { enabled: !!guildId } ); const deleteSubmissionMutation = api.applications.deleteSubmission.useMutation<{ guildId: string; submissionId: string; }>({ onSuccess: () => { // Remove the deleted submission from the local state // You can use the previous state and filter out the deleted submission refetch(); // This will refetch the submissions and update the local state }, }); const handleDeleteSubmission = async (submissionId: string) => { await deleteSubmissionMutation.mutateAsync({ guildId: guildId, submissionId: submissionId, }); }; return ( <div> {submissions?.map((submission) => ( <ApplicationContainer key={submission.id} submission={submission} guildId={guildId} onDelete={handleDeleteSubmission} /> ))} </div> ); }; const ApplicationContainer = ({ submission, guildId, onDelete, }: ApplicationContainerProps) => { const theme = useMantineTheme(); const handleDelete = () => { onDelete(submission.id); }; return ( <div> {/* Render your submission details */} <button onClick={handleDelete}>Delete</button> </div> ); };

In this example, the onSuccess callback of the deleteSubmissionMutation triggers after a successful deletion. Inside the onSuccess callback, the refetch function is called to fetch the updated list of submissions and update the local state. This way, you avoid fetching the entire list again and only update the necessary part of the state.