使用查询钩子react Apollo 条件调用

IT技术 javascript reactjs ecmascript-6 react-apollo
2021-05-20 20:19:13

我一直在使用react-apollo和渲染props方法。

这工作得很好,我的代码看起来像这样。

const App = () => {
   const [player, setPlayer] = React.useState(null);
   if (player) {
     return (
        <GetBroncosPlayerQuery variables={{ player }}>
           {({ data }) => {
              // do stuff here with a select box
            }} 
        </GetBroncosPlayersQuery>
     )
   }
}

现在,如果我尝试对useQuery钩子做同样的事情,当我的代码如下所示时,我会收到以下错误:

const App = () => {
   const [player, setPlayer] = React.useState(false);

   if (isBroncos) {
       const { data } = useQuery(GetBroncosPlayersQueryDocument, {
         variables: { player }
      });
      // do stuff here
   }
}

这会导致您无法在条件语句中使用钩子的错误。然后我实现了useLazyQuery但是这也不起作用,因为一旦它表现得像useQuery,那么它第一次就起作用了,但是如果用户将选择下拉列表再次更改为空,它就会中断。

查询挂钩仅有条件地调用查询的最佳方法是什么?

1个回答

您应该使用skip选项

如果 skip 为真,则查询将被完全跳过。

const isBroncos = getCondition();

const App = () => {
  const [player, setPlayer] = React.useState(false);

  const { data } = useQuery(GetBroncosPlayersQueryDocument, {
    variables: { player },
    skip: isBroncos
  });

  return !isBroncos && data && <>...</>;
};