你如何使用 Apollo Client 有效地批量處理 GraphQL 突變？

Question

我在使用 GraphQL 突變處理快速數據庫更新時遇到問題，特別是通過 Apollo Client 的react-hooks useQuery和useMutation 。 我有一個表示來自 DB 的數據的表，4 列是由復選框表示的布爾值，還有其他輸入。 勾選復選框（通過任一調度到數據庫的請求，以將值設置為真，則重新提取refetch勢在必行或refetchQueries ）查詢和更新表。

我的復選框組件：

export const TableCheckbox: <T extends VasaRecord & DomainEntity, K extends keyof T>(props: TableInputProps<T, K>) => ReactElement = ({
  value, // Boolean column value
  record, //Entire data record
  dataIndex //Accessor on record where value is located
}) => {
  const [checked, setChecked] = useState<boolean>(value as boolean);

  // useMutation function
  const { updateEntity } = useContext(
    TrackerContext
  );

  useEffect(() => {
    setChecked(value as boolean);
  }, [value]);

  const handleCheck = (e: CheckboxChangeEvent) => {
    const val = e.target.checked;
    setChecked(val);
    const newRecord = { id: record.key, [dataIndex]: val };

      updateEntity({
        variables: { entityTracker: JSON.stringify(newRecord) }
      }).then((res: any) => {
        console.log(res);
      });

  };

  return (
    <span className="checkbox-wrapper" onClick={disableClickSelect}>
      <Checkbox checked={checked} onChange={handleCheck} />
    </span>
  );
};

但是，此周期可能需要 1-2 整秒，這不是查看反映更改的可用響應時間。 我通過在內部管理復選框狀態並在處理突變/查詢和返回新數據之前更新它來解決這個問題。

這通常可以正常工作，但是當復選框或輸入等非常快速地連續更新時會導致奇怪的行為，並且由於它們的請求沒有被觸發，可能會錯過一些更新。 更糟糕的是，因為我在前端管理狀態，所以它可能會顯示不准確的信息，然后在最后一個查詢返回時覆蓋這些信息。 我可以在請求運行時禁用輸入，但這感覺像是在作弊。 除非您專門嘗試使用制表符和空格鍵來盡可能快地進行檢查，否則這並不是很明顯，但仍然不是很好。

答案是否使用 Apollo 提供的內存緩存來存儲客戶端數據，以便可以立即更新？ 這聽起來似乎可行，但我想知道如果更新的調度速度如此之快以至於它們相互干擾，我是否會遇到同樣的問題，另外這意味着重寫所有代碼以在任何地方與數據庫交互，即使是在此處不是問題（除非我弄錯了），所以如果可能的話，我寧願避免它。

有沒有一種有效的方法來批量突變或以其他方式防止它們相互干擾？ 我的整個方法有缺陷嗎？ 當單獨或由用戶操作觸發更新時，此模式工作正常，但它似乎根本不能很好地處理實時更新，因此非常感謝任何見解或替代方案！

Answer 1

聽起來您應該利用 Apollo 的樂觀 UI 功能。 您可以為您的突變指定一個optimisticResponse響應，它將用作來自服務器的實際響應的占位符。 這允許您的 UI 平滑地響應用戶操作而改變，即使需要一段時間才能從服務器獲得響應。 樂觀響應應用於緩存本身，因此應用程序的任何其他部分也會立即反映變化。 不幸的是，它不適用於refetch ，但理想情況下，您應該使用update而不是 refetching 查詢（而且optimizeResponse確實適用於您提供的任何update邏輯）。