NuxtN
Nuxt•4mo ago•
13 replies
Farshad Fahimi

useFetch with reactive variables called twice

I have a simple composables for feth the table data. when change the pageIndex it call twice the first one throw error from ns_binding_error and the second one return results.

export default function useTable<T>(url: string) {
  const searchText = useState<string>('table-search-text', () => '')
  const pagination = useState('table-pagination', () => ({ pageIndex: 1, pageSize: 10 }))

  const { data, error, refresh, status, pending } = useFetch<{ results: Array<T>, total: number }>(url, {
    query: computed(() => ({ search: searchText.value, pageIndex: pagination.value.pageIndex - 1, pageSize: pagination.value.pageSize })),
    // default: () => ({ results: [], total: 0 }),
  })

  const paginate = computed(() => ({ ...pagination.value }))

  function setPage(p: number) {
    pagination.value.pageIndex = p
  }

  const doSearch = useDebounceFn((text: string) => {
    searchText.value = text

    pagination.value.pageIndex = 1
  }, 300)

  function setSearchText(text: AcceptableValue) {
    doSearch(text as string)
  }

  return {
    data,
    error,
    refresh,
    status,
    pending,
    searchText,
    paginate,
    setPage,
    setSearchText
  }
}


I want to know why this happend and it call twice ?
and the important thing found: it call the request with old pagination data and not changed them.
Was this page helpful?