React自定义钩子内部的Apollo GraphQL查询 [英] Apollo GraphQL query inside of react custom hook

问题描述

我正在尝试列出Rick&中的所有角色.Morty API.我编写了以下挂钩以在要呈现结果的Component中使用.当我对值进行硬编码时，例如:(page:1，filter:{name:"Rick"})查询运行得很好.如果我尝试使用变量，它将返回错误400错误请求(我假设这意味着我的$ page/$ filter值无效，我试图检查其中的值及其类型，一切似乎都很好)我查看了 API文档.任何指导/方向都非常感激.

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挂钩参数:页面:数字|过滤器:字符串

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类型.经过一番挖掘后，我将其按如下方式工作.

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

这篇关于React自定义钩子内部的Apollo GraphQL查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！