查询正确，但得到 'undefined' 数据

Question

伙计们。我正在使用 React 学习 Apollo GraphQL，我刚刚制作了一个项目并打开 API（仅使用 GET）在我可以部署我的应用程序之前面临我的最后一个问题："undefined" data when I try to GET using an ID (Int).

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} returns 一个数组 (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
              });
        }
     },

查询正确，但得到 'undefined' 数据

Query is correct, but getting 'undefined' data

graphql

axios

apollo

react-apollo