Оптимистичный интерфейс (реагировать, swr, immer)

Question

Я хотел бы получить краткий обзор "моей" реализации оптимистичных шаблонов пользовательского интерфейса. Я использую SWR, иммер и специальный крючок для извлечения, чтобы делать большую часть тяжелой работы. Однако я не совсем уверен, действительно ли это способ сделать это. Особенно когда дело доходит до присвоения временного идентификатора оптимистично сгенерированному элементу. Разве я не должен его где-нибудь очистить? Может ли это вызвать проблемы?

const spawn = async flavour => {
    const payload = {
      planId: flavour.id,
      name: 'test',
      description: '',
    }
    mutate(
      '/account/instances',
      produce(draft => {
        draft.push({
          ...payload,
          id: uuid(),
          plan: {name: flavour.name},
          state: {status: 'PENDING'},
          image: {name: flavour.image.name},
        })
      }),
      false
    )
    mutate(
      '/account/instances',
      await doFetch('/account/instances', 'post', payload)
    )
  }

Благодаря!

Answer 1

Ваш код мне кажется правильным. Он оптимистично обновит пользовательский интерфейс, получит данные из бэкэнда и снова обновит пользовательский интерфейс этими данными, если они отличаются.

Regarding the generated id, it really depends on what you do with it. If you do nothing important it will probably be ok as that id will be overwritten with the real one when the backend replies. But it may cause problems if you display it to the user (the user will see it being updated), or even worse if you provide an action based on it.

I would also like to draw your attention on the fact that the reply may fail for network reasons, or reasons related to a problem on backend side. In that case, if you receive just an error or never receive any reply, your UI will remain in an incorrect state until the next successful fetch made by swr.To avoir this kind of problem, you may be interested in use-mutation. It's a small lib designed to be used with swr to rollback the optimistically updated data in case of error.