从函数调用 LazyQuery Hook

Question

我正在使用这样的 graphql 查询：

 const [loadUsers, { loading, data }] = useLazyQuery(LoadUsersQuery);

如果我在我的代码中使用它，惰性查询 loadUsers 会工作并且还会显示结果：

return (
    <div>
        <StyledSearchBar
          value={searchItem}
          onChange={value => {
            setSearchItem(value);
          }}
          onRequestSearch={() => loadUsers()}
        />
        {data &&
          data.users.nodes &&
          data.users.nodes.map((c: any, i: any) => (
            <li key={i}>
              Id: {c.id}, First Name: {c.firstName}, Last Name: {c.lastName},
              Email: {c.email}, phoneNumber: {c.phoneNumber}
            </li>
          ))}
      )
    </div>
  );
}

但是，如果我将 onRequestSearch={() => loadUsers()} 更改为 onRequestSearch={() => ShowUsers()}```` , the console gives meCheck``` 但是没有执行任何 graphql 查询，也没有显示任何结果。

function ShowUsers() {
    console.log('Check');
    loadUsers();
    {data &&
      data.users.nodes &&
      data.users.nodes.map((c: any, i: any) => (
        <li key={i}>
          Id: {c.id}, First Name: {c.firstName}, Last Name: {c.lastName},
          Email: {c.email}, phoneNumber: {c.phoneNumber}
        </li>
      ))}

为什么会这样？

编辑：

这会运行突变但不会加载用户。

onRequestSearch={() => ShowUsers()}

 function ShowUsers() {
    console.log('Checkk');
    loadUsers();
    return (
      <div>
        <Typography>Checking</Typography>
        {data &&
          data.users.nodes &&
          data.users.nodes.map((c: any, i: any) => (
            <li key={i}>
              Id: {c.id}, First Name: {c.firstName}, Last Name: {c.lastName},
              Email: {c.email}, phoneNumber: {c.phoneNumber}
            </li>
          ))}
      </div>
    );
}

Answer 1

你不能 return 处理函数中的 JSX，但是你可以将映射的 JSX 转换为组件并将属性传递给它

const [loadUsers, { loading, data }] = useLazyQuery(LoadUsersQuery);
return (
    <div>
        <StyledSearchBar
          value={searchItem}
          onChange={value => {
            setSearchItem(value);
          }}
          onRequestSearch={() => loadUsers()}
        />
        <ShowUsers data={data}/>
      )
    </div>
  );
} 

function ShowUsers({data}) {
    console.log('Check');

    return data &&
      data.users.nodes &&
      data.users.nodes.map((c: any, i: any) => (
        <li key={i}>
          Id: {c.id}, First Name: {c.firstName}, Last Name: {c.lastName},
          Email: {c.email}, phoneNumber: {c.phoneNumber}
        </li>
      )
    )
}

从函数调用 LazyQuery Hook

Call LazyQuery Hook From A Function

javascript

typescript

apollo

reactjs

graphql