Question

我正在使用apollo挂钩进行搜索以实现搜索功能。如果搜索词为空，则返回前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);

但是，当我在查询中添加变量选项时，如果我在输入字段中键入任何内容，它将使整个页面崩溃。这是我要完成的工作，当在输入字段中键入文本时，用户应单击“提交”按钮以更新列表。我在哪里不正确？

阿波罗查询，搜索时发生崩溃

0 个答案: