Query does not update properly when refreshed

[AQian-Cup]

I wanted the user to get more of the blog content when scrolling to the bottom of the page, so I used vueuse for that. There is a blog component at the bottom for display that fires an event externally when it appears within the view.The following is part of the code that implements this functionality.

<div ref="bottomRef">Already at the bottom of the page</div>

const emits = defineEmits<{
  (e: 'delete'): void;
  (e: 'reachBottom'): void;
}>();
const bottomRef = ref<HTMLElement | null>(null);
const bottomVisible = useElementVisibility(bottomRef);
watch(
  () => bottomVisible.value,
  (visible) => {
    if (visible) {
      emits('reachBottom');
    }
  },
);

This works fine. However, there were some problems with network requests and part of the code for this function is shown below.

const currentPage = ref(1);
const { data } = await useProxyAsyncData(url, {
  headers: {
    Authorization: authStore.authorization,
  },
  query: {
    current: currentPage.value,
  },
  watch: [currentPage],
  cache: false,
});
const getMore = () => {
  currentPage.value++;
};

With the cache attribute, it did skip the cache and re-initiated the request. However, the value of current is fixed for each request that is re-initiated. I tried outputting the currentPage value and found that it did change - if it didn't then it couldn't trigger a refresh either.

When I remove the watch attribute, the web request is not re-initiated, so I can tell that the query value has not changed, as you can also see in the image.

[AQian-Cup]

Sorry about that. I realised that the watch attribute would work and the query attribute wouldn't, the difference between them before was whether currentPage had the .value used or not. i thought that getting the value of currentPage directly might cause the function to lose responsive handling of it, so i tried to go with this writeup.

query: {
    current: currentPage,
}

Luckily, it worked.Function automatically unwraps the ref object when it initiates a web request.

[johannschopplich]

Correct! Glad you've found the solution. As a reminder, you can either pass a Ref or getter function:

// Ref
query: {
    current: currentPage,
}

// Getter function
query: {
    current: () => currentPage.value,
}