如何解决React / GraphQL:为什么在我的应用程序中搜索而不在GraphQL游乐场中搜索时会得到一个空数组?
GraphQL查询:这将在操场上运行,但不适用于我的应用程序。
const countryQuery = gql`
query getQuery($filter: _CountryFilter!) {
Country(filter: $filter) {
_id
name
capital
population
nativeName
}
}
`
pages / search.js
export default function Search()
{
const [filter,setFilter] = useState({ name: 'Hungary' })
const { data,loading,error } = useQuery(GET_COUNTRY_INFO,{
variables: { filter },})
if (loading){
return <Loader />;
}
if (error) return <p>Error</p>;
return (
<div className="body">
<h1>
Get Information
<br /> about Countries!
</h1>
<div className="wrapper">
<input
className="search"
type="text"
id="search"
placeholder='Enter a Country'
/>
<button
className="submit"
type="submit"
value=" "
onClick={e => setFilter({ name: e.target.value })}
onBlur={e => setFilter({ name: e.target.value })}
>
Search
</button>
{ data?.Country?.[0] && <CountryInfo country={data?.Country[0]} /> }
</div>
{/* <h2>Click search to reset</h2> */}
</div>
);
}
components / queryResults.js
import { Card,ListGroup,ListGroupItem } from 'react-bootstrap'
const CountryInfo = ({country}) => (
<div>
<Card style={{ width: '18rem' }}>
<Card.Body>
<Card.Title>{country.name}</Card.Title>
</Card.Body>
<ListGroup className="list-group-flush">
<ListGroupItem>Capital: {country.capital} </ListGroupItem> {' '}
<ListGroupItem>Population: {country.population}</ListGroupItem>
<ListGroupItem>Native Name: {country.nativeName}</ListGroupItem>
</ListGroup>
</Card>
</div>
)
export default CountryInfo;
我正在创建一个应用程序,允许用户搜索并获取有关不同国家的信息(GraphQL API)。但是,当我单击提交按钮时,我得到了一个空数组。我要去哪里错了?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。