ApolloClient/React/TypeScript，拖放缓存更新导致意外重新渲染

问题描述

最近几天我一直在我的应用程序中解决这个问题。当我使用 react-beautiful-dnd 并听 onDragEnd 时，我正在更改列表中的任务日期并希望避免任何客户端滞后，所以我已经实施与缓存更新一起使用乐观响应。只要我添加第二个任务，一切都会正常。然后事情开始变得时髦。每种类型都有自己的突变。 我有，可以说 2 种类型的任务，我为每种类型听dragEnd 的方式不同。我遇到的问题是：

• 将 REDDIT 类型的任务 1 从第 1 天移到第 2 天（一切都更新并呈现得很好）
• TWITTER 类型的任务 2 会无缘无故地重新渲染？！
• 当我在 TWITTER 列表中移动 TWITTER 类型的任务 3 时，事情会恢复正常？！

代码：

function uSEOnDragEnd({
  result: { source,destination,draggableId,type },data,}: {
  result: DropResult;
  data: data[];
}) {
  if (destination == null) return;

  const sourceId = +source.droppableId.slice(0,-1);
  const destinationId = +destination.droppableId?.slice(0,-1);

  if (sourceId === destinationId) return;

  if (type === 'reddit') {
    const task = data.find(
      ({ id }) => id === draggableId
    );

    if (task == null) return;

    editTaskDate({
      variables: {
        id: task.id,userId: task.user.id,date: moment.unix(destinationId).toDate().toISOString()
      },optimisticResponse: {
        editTask: {
          ...task,date: moment.unix(destinationId).toDate().toISOString()
        }
      },update: (store,{ data }) => {
        try {
          const result = store.readQuery<MeetingTasksQuery>({
            query: MeetingTasksDocument,variables: {
              userId: task.user.id,dateFrom: new Date(currWeek[0]).toISOString(),dateto: new Date(currWeek[6]).toISOString()
            }
          });

          if (result == null) return;

          store.writeQuery({
            query: MeetingTasksDocument,dateto: new Date(currWeek[6]).toISOString()
            },data: {
              items: [data?.editTask]
            }
          });
        } catch (e) {
          console.error(e);
        }
      }
    });
  }
 ...another types
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）