Fetch Data

request strategy

use hook

When you have the following needs:

1. Preload the data that will be used in subsequent processes and store it in the cache, so that users no longer have to wait for the data loading process;
2. Conveniently implement cross-page data update (similar to global state), for example, modify an item in the todo list and then re-fetch the latest data, and the interface will be refreshed after the response.

useFetcher is the hook used to implement the above scenario. The response data obtained through it cannot be received directly, but the data fetched through it will not only update the cache, but also update the corresponding state, thereby re-rendering the view.

Preload data

Let's implement a paging list to automatically preload the next page of data. Before preloading data, please make sure that the Method instance used has enabled caching.

vue

<template>
  <div v-if="loading">Fetching...</div>
  <!-- List view -->
</template>

<script setup>
  import { useFetcher } from 'alova/client';

  //method instance creation function
  const getTodoList = currentPage => {
    return alovaInstance.Get('/todo/list', {
      cacheFor: 60000,
      params: {
        currentPage,
        pageSize: 10
      }
    });
  };

  const {
    // the loading is the status of data fetching
    loading,
    error,
    onSuccess,
    onError,
    onComplete,

    // Only after calling fetch will a request be sent to fetch data. You can call fetch repeatedly to fetch data from different interfaces.
    fetch
  } = useFetcher({
    updateState: false
  });

  const currentPage = ref(1);
  const { data } = useWatcher(() => getTodoList(currentPage.value), [currentPage], {
    immediate: true
  }).onSuccess(() => {
    // After the current page is loaded successfully, pass in the method instance of the next page to pre-fetch the data of the next page.
    fetch(getTodoList(currentPage.value + 1));
  });
</script>

react

import { useState } from 'react';
import { useFetcher } from 'alova/client';

//method instance creation function
const getTodoList = currentPage => {
  return alovaInstance.Get('/todo/list', {
    cacheFor: 60000,
    params: {
      currentPage,
      pageSize: 10
    }
  });
};

const App = () => {
  const {
    // the loading is the status of data fetching
    loading,
    error,
    onSuccess,
    onError,
    onComplete,

    // Only after calling fetch will a request be sent to fetch data. You can call fetch repeatedly to fetch data from different interfaces.
    fetch
  } = useFetcher({
    updateState: false
  });
  const [currentPage, setCurrentPage] = useState(1);
  const { data, onSuccess } = useWatcher(() => getTodoList(currentPage), [currentPage], {
    immediate: true
  }).onSuccess(() => {
    // After the current page is loaded successfully, pass in the method instance of the next page to pre-fetch the data of the next page.
    fetch(getTodoList(currentPage + 1));
  });

  return (
    <>
      {loading ? <div>Fetching...</div> : null}
      {/* list view */}
    </>
  );
};

svelte

<script>
  import { writable } from 'svelte/store';
  import { useFetcher } from 'alova/client';

  //method instance creation function
  const getTodoList = currentPage => {
    return alovaInstance.Get('/todo/list', {
      cacheFor: 60000,
      params: {
        currentPage,
        pageSize: 10
      }
    });
  };

  const {
    // the loading is the status of data fetching
    loading,
    error,
    onSuccess,
    onError,
    onComplete,

    // Only after calling fetch will a request be sent to fetch data. You can call fetch repeatedly to fetch data from different interfaces.
    fetch
  } = useFetcher({
    updateState: false
  });
  const currentPage = writable(1);
  const { data, onSuccess } = useWatcher(() => getTodoList($currentPage), [currentPage], {
    immediate: true
  }).onSuccess(() => {
    // After the current page is loaded successfully, pass in the method instance of the next page to pre-fetch the data of the next page.
    fetch(getTodoList($currentPage + 1));
  });
</script>

{#if loading}
<div>Fetching...</div>
{/if}
<!-- List view -->

solid

import { createSignal } from 'solid-js';
import { useFetcher } from 'alova/client';

// method instance creation function
const getTodoList = currentPage => {
  return alovaInstance.Get('/todo/list', {
    cacheFor: 60000,
    params: {
      currentPage,
      pageSize: 10
    }
  });
};

const App = () => {
  const {
    // loading indicates the status of sending a pull request
    loading,
    error,
    onSuccess,
    onError,
    onComplete,

    // Only after calling fetch will a request be sent to pull data. You can call fetch repeatedly to pull data from different interfaces
    fetch
  } = useFetcher({
    updateState: false
  });
  const [currentPage, setCurrentPage] = createSignal(1);
  const { data } = useWatcher(() => getTodoList(currentPage()), [currentPage], {
    immediate: true
  }).onSuccess(() => {
    // After the current page is loaded successfully, pass the method instance of the next page to pre-fetch the data of the next page
    fetch(getTodoList(currentPage() + 1));
  });

  return (
    <>
      {loading() ? <div>Fetching...</div> : null}
      {/* List view */}
    </>
  );
};

warning

The above example is set updateState to false when calling useFetcher. This is because the data fetching will automatically trigger a states cross-component updating by default, causing the view to be re-rendered. When preload data is the same as the currently requested data. You can set it to false to avoid affecting view errors.

Update views across modules/components

Next, we will modify a todo data and re-fetch the latest todo list data to update the view. We may not know which page the todo list is currently on. In this case, when using the fetch function, we can use Method snapshots matcher to dynamically fetch the data of the current page.

The Method snapshots matcher is used to find method instances that meet the conditions among the requested method instances.

First, set a name for the method instance in the todo list, which is used to filter out the required Method instance when the Method instance cannot be specified directly.

api/todoList.js

const getTodoList = currentPage => {
  return alovaInstance.Get('/todo/list', {
    name: 'todoList',
    params: {
      currentPage,
      pageSize: 10
    }
  });
};

Then in the EditTodo component, use the fetch function to dynamically find the last name of todoList in the requested Method instance to fetch data.

EditTodo Component

const { fetch } = useFetcher();

// Trigger data fetch in event
const handleSubmit = () => {
   // submit data...
  const lastMethod = alovaInstance.snapshots.match({
    name: 'todoList',
    filter: (method, index, ary) => {
      // Return true to specify the Method instance that needs to be fetched
      return index === ary.length - 1;
    }
  }, true);
  if (lastMethod) {
    await fetch(lastMethod);
  }
};

Notes

useFetcher only updates the cache after the request is completed, and if this Method is foundIf the instance has been requested using useHook before, the data state created by this useHook will also be updated to ensure that the page data is consistent. This is the guarantee that useFetcher is used to update views across modules/components.

For more methods of using Method instance matcher, see Method instance matcher.

Force sending request

Same as useRequest and useWatcher, please read Force Request for more information.