harsh-harlequin

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);
    }
  });

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);
    }
  });

2 Replies

unwilling-turquoise•3y ago

This is more of a browser issue. Some services add a parameter to the URL to indicate that the image has changed.

harsh-harlequinOP•3y ago

Thank you! Do you have any resource that could provide insights about these solutions?

Gaming

Programming

Image URL cached

Did you find this page helpful?