如何解决React 自定义钩子内的 Apollo GraphQL 查询
我正在尝试列出 Rick & Morty API 中的所有角色。我编写了以下钩子以在将呈现结果的组件中使用。当我对值进行硬编码时,例如:(page: 1,filter: { name : "Rick"})
查询运行得很好。如果我尝试使用变量,它会返回错误 400 错误请求(我假设这意味着我的 $page / $filter 值无效,我试图检查它们中的值 + 它们的类型,一切似乎都很好)我查看了 Apollo | Queries - Client (React) 处的文档,并确保我使用了正确的语法将变量注入到查询中。该查询来自官方 Rick & Morty API 文档 API Docs。非常感谢任何指导/方向。
useCharecterList 钩子 参数:页面:编号 |过滤器:字符串
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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。