Updating React Query Cache with Presigned URLs

[OtaniToshiyuki]

setQueryData is not directly writing the response of registerImagePath or deleteImagePath

Instead, it writes a locally constructed object (newEntry) that includes a newly generated presigned URL

Questions

Does this approach violate the recommended usage of setQueryData?

Even though the presigned URL is generated by the server, it is not returned as part of the mutation response.

Is there a more idiomatic or recommended approach for handling presigned URLs with expiration, while avoiding unnecessary invalidation and regeneration?

https://tkdodo.eu/blog/practical-react-query#dont-use-the-querycache-as-a-local-state-manager

“Don’t use the query cache as a local state manager.
Use it only for optimistic updates or for writing data received from the backend.”

interface S3Image {
  path: string;
  presiginedUrl: string;
}

export const S3PresignedImageManager = ({ id }: { id: string }) => {
  const trpc = useTRPC();
  const queryClient = useQueryClient();

  const { data }: { data: S3Image[] } = useSuspenseQuery(
    trpc.image.getById.queryOptions({ id }),
  );

  const { mutateAsync: registerImagePath } = useMutation(
    trpc.image.registerPath.mutationOptions(),
  );
  const { mutateAsync: deleteImagePath } = useMutation(
    trpc.image.deletePath.mutationOptions(),
  );

  const onObjectUploaded = async (newEntry: S3Image) => {
    const { path } = newEntry;
    await registerImagePath({ id, path });

    queryClient.setQueryData(
      trpc.image.getById.queryKey({ id }),
      (prev) => (prev ? [...prev, newEntry] : [newEntry]),
    );
  };

  const onObjectDeleted = async ({ path }: { path: string }) => {
    await deleteImagePath({ id, path });

    queryClient.setQueryData(
      trpc.image.getById.queryKey({ id }),
      (prev) =>
        prev ? prev.filter((image) => image.path !== path) : undefined,
    );
  };

  return (
    <S3ImageManager
      images={data}
      uploadDirectory={buildImageS3Path(id)}
      onObjectUploaded={onObjectUploaded}
      onObjectDeleted={onObjectDeleted}
      label="image file"
    />
  );
};