TanStackT
TanStack•3y ago•
2 replies
skinny-azure

Image URL cached

Hi! I have been using Vue Query to update a user's profile picture with a mutation. The problem is that, when the picture is updated, the browser keeps showing the previous picture, and I think that happens because the URL is the same (we use cloudinary) as the previous one, even though the image is different.

Does this have to do with Vue Query or the browser? If so, what could I do to fix it? I have tried several methods, but have not found a way to make it work.

Vue Query Snippet


const {
    mutate: changePicture,
    isLoading: isPictureLoading,
    isError: isPictureError,
  } = useMutation({
    mutationFn: (image) => {
      return userService.changeProfileImage(id.value, image);
    },
    // https://tanstack.com/query/latest/docs/vue/guides/updates-from-mutation-responses
    onSuccess: ({ message, user: receivedUser }) => {
      const { profilePicture } = receivedUser;

      if (!profilePicture) {
        return;
      }

      queryClient.setQueryData(queryKey, (oldUser) => ({
        ...oldUser,
        profilePicture: {
          ...profilePicture,
          cloudURL: profilePicture.cloudURL,
        },
      }));

      const queryData = queryClient.getQueryData(queryKey);
    }
  });
image.png
Was this page helpful?