一系列链式 http 请求的 React hooks 和 RTK 模式

Question

在我的组件中，我需要获取 contestDetails，从响应中获取一个值 (draftgroupId)，然后获取 draftGroup。通常我会将它们分别包装在 useEffect:

  const [draftGroupId, setDraftGroupId] = useState();
  useEffect(() => {
    api.getContestDetails(contestId).then(res => setDraftGroupId(res.draftGroupId));
  }, []);

  useEffect(() => {
    api.getDraftGroupId(draftGroupId).then(res => /* use the response */);
  }, [draftGroupId]);

但是，我正在使用 RTK 查询进行抓取，因此抓取本身是使用挂钩执行的。 RTK 查询处理何时获取和何时不获取（或类似的东西），因此第一个查询 useGetContestByIdQuery(contestId); 可以位于组件的顶层。

然而，第二个查询 useGetDraftGroupByIdQuery(draftGroupId); 需要等到我们有一个 contestId。但是你不能有条件地调用一个钩子，所以我不能用 if 包装它，你也不能从另一个钩子调用一个钩子，所以我不能把它包装在 [=15] =] 将 contestId 作为依赖项，如上例所示。

我不确定这是否会改变一些事情，但我也没有使用 RTKQ 挂钩的 return 值，因为我在我自己的 RTK 减速器中处理该数据（使用 extraReducers).我不认为这有什么区别，因为我是从 redux 得到 draftgroupId 还是从查询挂钩的 data return 得到它，我的问题仍然是一样的。

这是我的想法，它只是将每个提取包装在它自己的组件中，因为组件将有条件地呈现。

const GetContest = ({ contestId, ...props }) => {
  useGetContestByIdQuery(contestId); // populates state.currentDraft for next line
  
  const { draftgroupId, gameTypeId } = useSelector(getCurrentDraftState).contest;

  return !draftgroupId ? null : (
    <GetDraftGroup
      draftGroupId={draftgroupId}
      gameTypeId={gameTypeId}
      {...props}
    />
  );
};

const GetDraftGroup = ({ draftGroupId, gameTypeId, ...props }) => {
  useGetDraftGroupByIdQuery(draftGroupId, gameTypeId); // populates state.currentDraft.players for next line

  const players = useSelector(getAllPlayers);

  return !players ? null : <ActualGameScreen {...props} />;
};

这不可能是正确的方法，对吧？使用 RTK 查询执行此操作的正确方法是什么？

Answer 1

您可以使用 skip 选项或 skipToken 作为您的“条件”案例：

useGetContestByIdQuery(contestId ?? skipToken);

或

useGetContestByIdQuery(contestId, { skip: !contestId });

一系列链式 http 请求的 React hooks 和 RTK 模式

React hooks & RTK pattern for a series of chained http requests

reactjs

react-hooks

rtk-query