How to pass argument to nuxt $fetch?

Question

• I am using the new fetch() method in Nuxt
• I need to load an infinitely scrolling list and fetch() makes it hard
• Nuxt calls fetch first time when you load the page
• Whenever I load more, I call fetch again
• When I change the search and filter on the page, fetch is called again
• I need a way to distinguish between all these calls
• How do I pass an argument to fetch() so that I can distinguish when Nuxt calls it directly vs me calling it via loadMore or it getting called because the search and filter in the query changes?

Answer 1

You can't pass custom args to fetch().

You can set up an async method() and there make your API calls. If you need to take advantage of $fetchState.pending in order to display some placeholder while your content loads, you can set a isLoading: false property in data() and in the newly created method you set isLoading = true before you make the API call, isLoading = false after the API call.

Then in your template you can make conditionals like this: <div v-if="$fetchState.pending || isLoading">