我正在尝试列出 Rick & Morty API 中的所有角色。我编写了以下钩子以在我的组件中使用，该组件将呈现结果。当我对值进行硬编码时，例如：(page: 1 , filter: { name : "Rick"})查询运行得很好。如果我尝试使用变量，它会返回错误 400 错误请求（我假设这意味着我的 $page / $filter 值无效，我尝试检查其中的值+它们的类型，一切看起来都很好）我查看了文档阿波罗|查询 - 客户端 (React) https://www.apollographql.com/docs/react/data/queries/并确保我使用正确的语法将变量注入查询中。该查询来自官方 Rick & Morty API 文档API Docs https://rickandmortyapi.com/documentation/#graphql。非常感谢任何指导/方向。
useCharacterList 钩子
参数：页码：编号|过滤器：字符串
import { useQuery, gql } from '@apollo/client';
const CHARECTERS_LIST = gql`
query ($page: Number!, $filter: String!){
characters
(page: $page , filter: { name : $filter}) {
info {
next
prev
}
results {
id
name
image
}
}
}
`;
export default function useCharecterList({page, filter}){
return useQuery(CHARECTERS_LIST, {
variables: {page, filter}
});
}
组件渲染结果：
import useCharecterList from '../hooks/useCharecterList'
import { Fragment } from 'react';
import InputComponent from './InputComponent';
function CharectersList() {
const { loading, error, data } = useCharecterList({page: 1, filter: "Rick"});
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
const options = data.characters.results.map(({name}) =>{
return name;
})
return(
<Fragment>
<InputComponent options={options}></InputComponent>
{
data.characters.results.map(({ id, name, image }) => (
<div key={id}>
<img src={image} alt={`${name} from the popular sitcom Rick & Morty`}/>
<p>{name}</p>
</div>
))
}
</Fragment>
)
}
export default CharectersList
我想通了...就像一个白痴一样，我假设查询类型只是普通的 JS 类型。经过一番挖掘后，我让它按如下方式工作。
import { useQuery, gql } from '@apollo/client';
const CHARECTERS_LIST = gql`
query CharectersList($page: Int!, $filter: FilterCharacter!){
characters
(page: $page, filter: $filter) {
info {
next
prev
}
results {
id
name
image
}
}
}
`;
export default function useCharecterList(options){
return useQuery(CHARECTERS_LIST, options);
}
import useCharecterList from '../hooks/useCharecterList'
import { Fragment } from 'react';
import InputComponent from './InputComponent';
function CharectersList() {
const { loading, error, data } = useCharecterList({variables: {page: 1, filter: { name: "Summer" }}});
if (loading) return <p>Loading...</p>;
if (error) {
console.log(error);
return <p>Error :(</p>}
const options = data.characters.results.map(({name}) =>{
return name;
})
return(
<Fragment>
<InputComponent options={options}></InputComponent>
{
data.characters.results.map(({ id, name, image }) => (
<div key={id}>
<img src={image} alt={`${name} from the popular sitcom Rick & Morty`}/>
<p>{name}</p>
</div>
))
}
</Fragment>
)
}
export default CharectersList
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
