Apollo 客户端 MockedProvider：跳过加载状态

编程问答 2022-05-21

问题描述

我已经用 Apollo 设置了一个 React 应用程序，它有一个包装组件来处理从网络加载数据，这样下面的每个组件都可以直接从 Apollo 缓存中查询数据，而不必担心处理加载状态。因此，我的组件如下所示：

export const COUNT_OFF_ADAPTER_QUERY = gql`
  query CountOffAdapterQuery($vampId: ID!) {
    vamp(id: $vampId) @client {
      id
      countingOff
      countingOffStartTime
    }
  }
`;

export const CountOffAdapter: React.FC<{}> = () => {
  const vampId = useCurrentVampId();

  const {
    data: {
      vamp: { countingOff,countingOffStartTime }
    }
  } = useQuery<CountOffAdapterQuery>(COUNT_OFF_ADAPTER_QUERY,{
    variables: { vampId }
  });

  const prev = usePrevIoUs({ countingOff,countingOffStartTime });

  const countOff = useCountOff();

  useEffect(() => {
    // Do react stuff
  },[countOff,countingOff,prev]);

  return null;
};

在实践中（在浏览器中），这非常有效，因为在应用程序中 Apollo 将立即从缓存中返回数据，因此 loading 调用的 useQuery 结果永远不会{{1}我可以解构数据，在后续的钩子中使用它，等等。

然而，当需要进行测试时，似乎 true 必然 将 MockedProvider 返回为 loading，不让测试编写者控制是否跳过那个状态（显然我想这样做）。请注意，当 true 返回 useQuery 为 loading 时，渲染我的组件将出错，因为它正在解构 true，这是未定义的。正因为如此，我永远无法在测试失败的情况下超过加载状态。

这是我的测试代码：

data

我很好奇是否有办法解决这个问题。如果您可以在查询模拟中指定 it("works",async () => { (useCurrentVampId as jest.Mock).mockImplementation( () => "6070dedd58d7bf715eb2a6c5" ); const component = mount( <MockedProvider mocks={[ { request: { query: COUNT_OFF_ADAPTER_QUERY,variables: { vampId: "6070dedd58d7bf715eb2a6c5" } },result: { data: { vamp: { id: "6070dedd58d7bf715eb2a6c5",countingOff: true,countingOffStartTime: 1234 } } } } ]} addTypename={false} > <CountOffAdapter></CountOffAdapter> </MockedProvider> ); await wait(0); component.update(); }); ，但您不能。

解决方法

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

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

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

apolloapolloapolloapollo-clientreact-apollotypescripttypescripttypescript