Question

最近几天我一直在我的应用程序中解决这个问题。当我使用 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,
            variables: {
              userId: task.user.id,
              dateFrom: new Date(currWeek[0]).toISOString(),
              dateTo: new Date(currWeek[6]).toISOString()
            },
            data: {
              items: [data?.editTask]
            }
          });
        } catch (e) {
          console.error(e);
        }
      }
    });
  }
 ...another types
}

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

0 个答案: