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

TanStack•3y ago•

2 replies

skinny-azure

Image URL cached

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

Image URL cached

Vue Query Snippet

Similar Threads

Image URL cached

Vue Query Snippet

Similar Threads

Similar Threads

Similar Threads