Question

伙计们我正在用React学习Apollo GraphQL，我刚刚制作了一个消耗项目且开放的API（仅使用GET）在部署应用程序之前面临最后的问题：尝试使用ID（Int）进行GET操作时，“未定义”数据。

Github存储库： https://github.com/akzeitions/reactbeer

我的查询（在GraphiQL上可用）：

const CERVEJA_QUERY = gql`
 query CervejaQuery($id: Int!){
    cerveja(id : $id){
        id
       name
       tagline
       image_url
       abv
       ibu
     }
}
`;

console.log(CERVEJA_QUERY);

可能是问题：解决

const RootQuery = new GraphQLObjectType({
    name: 'RootQueryType',
    fields:{ 
     cerveja: {
      type: new GraphQLList(CervejaType),
            args: {
                id : {type : GraphQLInt}
            },
            resolve(parent, args) {
              return axios
                .get(`https://api.punkapi.com/v2/beers/${args.id}`)
                .then(res => res.data);
            }
          },

export class CervejaDetalhe extends Component {
  render() {

    //get and parse ID
    let { id } = this.props.match.params;
    id = parseInt(id);

    return (
    <Fragment>
        <Query query={CERVEJA_QUERY} variables={{ id }}>
        {
          ({ loading, error, data  }) => {
                if (loading) return <h4>Carregando...</h4>
                if (error) console.log(error)



                const {
                    name,
                    tagline,
                    image_url,
                    abv,
                    ibu
                } = data;

                //undefined :(

                return (
                <div>
                    <h1 className="display-4 my-3">
                    Cerveja : {name}
                    </h1>
                </div>

仅仅花费了一些时间阅读，进行测试并试图弄清楚却没有成功。：（

Answer 1

问题似乎出在您的服务器实现中。

您的类型ceveja返回一个列表type: new GraphQLList(CervejaType)，但是您希望只获得一个记录而不是列表。

此外，api api.punkapi.com/v2/beers/${args.id}返回一个数组（List），因此您也应该将其转换为对象。

您应该将RootQuery更改为以下内容：

  const RootQuery = new GraphQLObjectType({
    name: 'RootQueryType',
    fields:{ 
     cerveja: {
      type: CervejaType, // HERE: remove the List
      args: {
        id : {type : GraphQLInt}
      },
      resolve(parent, args) {
        return axios
              .get(`https://api.punkapi.com/v2/beers/${args.id}`)
              .then(res => {
                // HERE: you need to transform the data from the API into
                // one object instead of an array
                const [data] = res.data
                return data
              });
        }
     },

希望有帮助。

查询正确，但获取“未定义”数据

1 个答案: