Аполлон запрос для поиска с переменными сбоями - PullRequest
Новая
       29

Аполлон запрос для поиска с переменными сбоями

0 голосов
/ 30 октября 2019

Я делаю запрос, используя аполлонные хуки для функции поиска. Если поисковый термин пуст, верните первые 20 элементов. Если поисковый термин не пустой, верните соответствующие объекты и ограничьте их до 20. Ниже приведен мой код 

import React, { Fragment } from 'react';
import Head from 'next/head';
import gql from 'graphql-tag'
import Link from 'next/link';
import { useQuery } from '@apollo/react-hooks';
import { withApollo } from '../apollo/client';
import { Button, Card, Container, Page } from '../primitives';
import { SearchForm } from '../components/SearchForm';
import { JobItem } from '../components/JobItem';

const JobsQuery = gql`
  query jobs {
    jobs {
      id
      title
      description
      labels
      source
      suburb
      dateAdded 
      logo
    }
  }
`

const FilteredJobsQuery = gql`
  query filteredJobs($search: String!) {
    jobs(search: $search) {
      id
        title
        description
        labels
        source
        suburb
        dateAdded 
        logo
    }
  }
`;


const Home = () => {
  const [searchText, onSearch] = React.useState('');
  const { data: { jobs }, error, loading } = useQuery(FilteredJobsQuery, {
    variables: {
      search: searchText || ''
    }
  });

  const uploadResume = () => {
    alert('Temporary disabled due to high demand!');
  }

  if (error) {
    return <div>Oops, something went wrong!</div>
  }

  if (loading) {
    return <div>Loading...</div>
  }

  return (
    <Fragment>
      <Head>
        <title>Job Search</title>
      </Head>
      <Container>
        <SearchForm
          onChange={e => onSearch(e.target.value)}
          onClear={e => {
            onSearch('');
            //TODO
          }}
          onSubmit={e => {
            e.preventDefault();
            // refetch();
          }}
          value={searchText}
        />
      </Container>
      <Page
        main={
          <Card>
            {
              jobs.map((job, idx) => (
                <JobItem key={job.id} job={job} index={idx} />
              ))
            }
          </Card>
        }
        aside={
          <Fragment>
            <p>Let employers find you:</p>
            <Button
              appearance="secondary"
              isBlock
              onClick={uploadResume}
            >
              Upload your resumé
                            </Button>
          </Fragment>
        }
      />

    </Fragment>
  )
}

export default withApollo(Home);

Однако, когда я добавляю параметры переменных в запрос, происходит сбой всей страницы, если явведите что-нибудь в поле ввода. Вот что я пытаюсь сделать, когда текст вводится в поле ввода, пользователь должен нажать кнопку отправки, чтобы обновить список. Где я не прав?

...