Установка критериев для GraphQL-запроса - PullRequest
Новая
       7

Установка критериев для GraphQL-запроса

0 голосов
/ 10 марта 2020

У меня есть простая страница с выпадающим меню и кнопкой. Если я нажму кнопку, в настоящее время я получаю все значения .id из бэкэнда graphql (используя закомментированный код).

Однако я хочу изменить его таким образом, чтобы, если я выберу FirstName из Select / DropDownMenu, значение которого равно 1 (хранится в переменной «критерии»), я получу все c.firstName ценности. Для этого я попытался создать отдельную функцию ShowUsers (), но ничего не получил. Как я могу это исправить? 

const LoadUsersQuery = gql`
query {
  users {
    nodes {
      id, firstName, email
    }
    totalCount
  }
}`;


export default function UserSearchPage() {
  const [criteria, setCriteria] = useState('');
  const [searchItem, setSearchItem] = useState('');

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

  function ShowUsers(){
    if (criteria=='1'){
    {data &&
      data.users.nodes &&
      data.users.nodes.map((c: any,i: any) => <div key={i}>{c.firstName}</div>)}
  }
  if (criteria=='2'){
    {data &&
      data.users.nodes &&
      data.users.nodes.map((c: any,i: any) => <div key={i}>{c.lastName}</div>)}
  }
}


  return (
    <div>
      <PermanentDrawerLeft></PermanentDrawerLeft>
      <div className='main-content'>
        <Select
          value={criteria}
          onChange={event => setCriteria(event.target.value as string)}
          displayEmpty>
          <MenuItem disabled value="">
            <em>Search By</em>
          </MenuItem>
          <MenuItem value={1}>First Name</MenuItem>
          <MenuItem value={2}>Last Name</MenuItem>
          <MenuItem value={3}>Phone Number</MenuItem>
          <MenuItem value={4}>Email</MenuItem>
        </Select>


    <button onClick={() => loadUsers()}>CHECK</button> 
        {ShowUsers()}
        {/* {data &&
      data.users.nodes &&
      data.users.nodes.map((c: any,i: any) => <div key={i}>{c.id}</div>)}        
        <Typography>{criteria}</Typography> */}
      </div>
          )
    </div>
  );
}

Если я пытаюсь поместить оператор data.users.node в return (), я получаю синтаксические ошибки в && и}.

...