反应自定义钩子内的 Apollo GraphQL 查询 [英] Apollo GraphQL query inside of react custom hook
问题描述
我正在尝试列出 Rick & 中的所有角色莫蒂 API.我编写了以下钩子以在将呈现结果的组件中使用.当我对值进行硬编码时，例如: (page: 1 , filter: { name : "Rick"}) 查询运行得很好.如果我尝试使用变量，它会返回错误 400 错误请求(我我假设这意味着我的 $page/$filter 值无效，我试图检查它们中的值 + 它们的类型一切似乎都很好)我查看了 阿波罗 |查询 - 客户端 (React) 并确保我使用正确的语法将变量注入到查询中.查询来自官方 Rick &Morty API 文档 API 文档.非常感谢任何指导/方向.
useCharecterList 钩子参数:页面:编号 |过滤器:字符串
import { useQuery, gql } from '@apollo/client';const CHARECTERS_LIST = gql`查询 ($page: Number!, $filter: String!){人物(页面: $page , 过滤器: { name : $filter}) {信息{下一个上一页}结果 {ID姓名图片}}}`;导出默认函数 useCharecterList({page, filter}){返回 useQuery(CHARECTERS_LIST, {变量:{页面，过滤器}});}组件渲染结果:
从'../hooks/useCharecterList'导入useCharecterList从反应"导入{片段}；从'./InputComponent'导入输入组件；函数字符列表(){const { 加载，错误，数据 } = useCharecterList({page: 1, filter: "Rick"});if (loading) return <p>Loading...</p>;if (error) 返回 <p>Error :(</p>;const 选项 = data.characters.results.map(({name}) =>{返回名称；})返回(<片段><InputComponent options={options}></InputComponent>{data.characters.results.map(({ id, name, image }) => (<div key={id}><img src={image} alt={`${name} 来自流行的情景喜剧 Rick &莫蒂`}/><p>{名称}</p>))}</片段>)}导出默认字符列表
我想通了...像个白痴一样，我认为查询类型只是您的普通 JS 类型.经过一番挖掘，我让它按如下方式工作.
import { useQuery, gql } from '@apollo/client';const CHARECTERS_LIST = gql`查询字符列表($page: Int!, $filter: FilterCharacter!){人物(页面:$page，过滤器:$filter){信息{下一个上一页}结果 {ID姓名图片}}}`;导出默认函数 useCharecterList(options){返回 useQuery(CHARECTERS_LIST, options);}从'../hooks/useCharecterList'导入useCharecterList从反应"导入{片段}；从'./InputComponent'导入输入组件；函数字符列表(){const { loading, error, data } = useCharecterList({variables: {page: 1, filter: { name: "Summer" }}});if (loading) return <p>Loading...</p>;如果(错误){控制台日志(错误)；返回<p>错误:(</p>}const 选项 = data.characters.results.map(({name}) =>{返回名称；})返回(<片段><InputComponent options={options}></InputComponent>{data.characters.results.map(({ id, name, image }) => (<div key={id}><img src={image} alt={`${name} 来自流行的情景喜剧 Rick &莫蒂`}/><p>{名称}</p>))}</片段>)}导出默认字符列表
I'm trying to list all the characters from Rick & Morty API. I wrote the following hook to use in my Component that is going to render the result. When I hardcoded values eg: (page: 1 , filter: { name : "Rick"}) The query runs just fine.If I try to use variables it returns an error 400 bad request (I'm assuming this means my $page / $filter values are invalid and I tried to check the values within them + their types everything seemed fine)I looked at the documentation at Apollo | Queries - Client (React) and made sure that I was using the proper syntax to inject variables into the query. The query is from the official Rick & Morty API docs API Docs. Any guidance/direction is much appreciated.
useCharecterList Hook Params: page: Number | filter: String
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}
});
}
Component Rendering the results:
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
I figured it out... Like an Idiot I assumed the query types are just your normal JS types. After some digging I got it to work as follows.
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
这篇关于反应自定义钩子内的 Apollo GraphQL 查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
