react自定义钩子内的 Apollo GraphQL 查询

IT技术 reactjs graphql react-hooks apollo apollo-client
2021-05-16 03:16:14

我正在尝试列出 Rick & Morty API 中的所有角色。我编写了以下钩子以在将呈现结果的组件中使用。当我对值进行硬编码时，例如： (page: 1 , filter: { name : "Rick"})查询运行得很好。如果我尝试使用变量，它会返回错误 400 错误请求（我假设这意味着我的 $page / $filter 值无效，我尝试检查其中的值+他们的类型一切似乎都很好）我查看了Apollo |的文档 查询 - 客户端 (React)并确保我使用正确的语法将变量注入查询。查询来自官方 Rick & Morty API docs 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

1个回答

我想通了......像一个白痴一样，我认为查询类型只是你的普通 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

其它你可能感兴趣的问题
上一篇我如何在react中合并两个组件 下一篇使用 ReactJS 旋转图像预览