Step 5 - Edit Data

What should I do when the user needs to edit data when the network is disconnected?

At this point, two situations need to be explained:

1. The list data can meet the data echo of the edit page. At this time, the list data can be passed to the edit page without requesting. At this time, all list data supports editing in the silent submission mode;
2. The echo data on the edit page needs to be obtained through the api, and only the locally cached list items can echo the data normally, for example:
   1. For the list items that have been accessed before the network is disconnected, the request can hit the cache again;
   2. Created through the silent submission mode, but the list item has not been successfully submitted, and the submitted data still exists in the silentMethod instance;

And here we will focus on the case of 2-2.

Edit silent submit items

In the previous chapters, we know that when the newly created data item has not been successfully submitted, the virtual data will be used as the placeholder for the id. Usually, we also get the data item through the id. At this time, we implement virtual data interception on useSQRequest. If a request carries virtual data information, it will be intercepted before being sent, and you can specify data to replace the response and abandon the request.

Remember the silentMethod.reviewData saved in Step 2 - Adjust Response Handling?

onSuccess(({ silentMethod }) => {
  // Construct list data items
  const editingItem = {
    ...detail,
    id: id || data.id
  };
  //...
  if (silentMethod) {
    // Setting the name is to find the corresponding silentMethod instance when intercepting
    silentMethod.entity.setName('edit' + editingItem.id);
    silentMethod.reviewData = {
      operate: id ? 'edit' : 'add',
      data: editingItem
    };
    // Don't forget to call save
    silentMethod.save();
  }
});

It can be used not only for data compensation, but also for echoing data in edit pages.

const { loading, data } = useSQRequest(id => todoDetail(id), {
  initialData: {
    title: '',
    time: new Date()
  },
  immediate: false,

  // Set the interception function, the function will be called when there is virtual data in this request
  // If reviewData is returned, it will replace the response data and give up this request, otherwise the request will still be initiated
  vDataCaptured: () => {
    const targetSM = filterSilentMethods('edit' + todoId).pop();
    if (targetSM?.reviewData) {
      return { ...targetSM.reviewData.data };
    }
  }
});

Caution

You can save enough data in silentMethod.reviewData to satisfy both list data compensation and edit page data echo.

So far, data items created through silent submit mode also support editing. There is just one more thing to cover.

When the data item being edited is submitted successfully

When the user is editing a data item that has not been successfully submitted, it suddenly submits successfully! At this time, we need to replace the virtual data used in the edit page with actual data, for example, replace the virtual id with the actual id, and use the actual id to submit in the next edit. This is also very simple. We only need to listen for the silent submit success event, which receives a collection of virtual data and real data.

import { onSilentSubmitSuccess, stringifyVData } from 'alova/client';

//...
// id is virtual data during initialization
let id = /* todo virtual id */;

// Binding listener silently submits the successful event to update the id, and returns the unbind function, don't forget to call the unbind function when the component is destroyed
const unbindEvent = onSilentSubmitSuccess(event => {
   const vDataId = stringifyVData(id);
   if (event.vDataResponse[vDataId]) {
     id = event.vDataResponse[vDataId];

     // The following is to change the virtual id in the url to the actual id
     history.replaceState(null, '', '?id=' + currentId);
   }
});

Here, the event.vDataResponse value is a collection of virtual data id and actual data, and its format is as follows:

{
   '[vd:aaaaaa]': { id: 1 },
   '[vd:bbbbbb]': 1
}

So far, we have completed all the content of a simple list of non-inductive interaction, but in other scenarios such as editing apps and complex list management, you may encounter different needs. What other features does alova offer? Please read the next chapter!