反应阿波罗以单个节点的乐观响应重新呈现所有平面列表项目？

Question

我想在 react native 的 flatlist 中的单个节点上实现乐观响应，这是 flatlist 父节点：

interface TodosData {
  todos: Todo[];
}

const GET_TODOS = gql`
  query GetTodos {
    todos {
      id
      complete
    }
  }
`;
const RenderFL = () => {
  const { loading, data, error } = useQuery<TodosData>(GET_TODOS);
  if (loading) return <ActivityIndicator />;
  if (error) return null;
  return (
    <StyledFlatList
      extraData={data}
      data={(data && data.todos) || []}
      renderItem={({ item }) => <Item id={item.id} complete={item.complete} />}
      keyExtractor={(item) => `${item.id}`}
    />
  );
};

现在我想用乐观响应切换属性 complete、false 或 true：

interface ItemProps {
  id: string;
  complete: boolean;
}
const UPDATE_TODO = gql`
  mutation ToggleTodo($id: String!) {
    toggleTodo(id: $id) {
      id
      complete
    }
  }
`;
const Item: FC<ItemProps> = ({ id, complete }) => {
  const [tI, settI] = useState(false);
  const [v] = useState(`${id}`);
  const [saveTodo, { error, loading }] = useMutation<
    { updateTodo: Todo },
    { id: string }
  >(
    // { rocket: NewRocketDetails }
    UPDATE_TODO,
    {
      variables: { id }
    }
  );
  if (loading) return <ActivityIndicator />;
  if (error) return null;
  return (
    <View style={[styles.item]}>
      <Pressable
        onPress={() => {
          saveTodo({
            optimisticResponse: {
              updateTodo: {
                id,
                complete: !complete,
              },
            },
          });
        }}
        style={{ backgroundColor: "blue" }}>
        <Text style={[styles.title, , { color: complete ? "red" : "green" }]}>
          {v}
        </Text>
      </Pressable>
    </View>
  );
};

但是 flatlist 中的所有其他项目都在重新渲染？ 您可以观察到动画快速发生，这很奇怪，我只想在 flatlist 中切换一个具有乐观响应的道具，帮助？