Запрос правильный, но получает неопределенные данные - PullRequest
0 голосов
/ 29 марта 2019

SUP, ребята.Я изучаю Apollo GraphQL с React, и я только что создал проект, потребляющий и открывающий API (только с использованием GET) Перед моей последней проблемой, прежде чем я смогу развернуть свое приложение: «неопределенные» данные, когда я пытаюсь получить GET, используя 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);

image

Вероятно, проблема: Решить

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>

Просто потерял несколько часов, читая, делая тесты и пытаясь вычислить без успеха.(

1 Ответ

0 голосов
/ 03 апреля 2019

Кажется, проблема в реализации вашего сервера.

Ваш тип 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
              });
        }
     },  

Надеюсь, это поможет.

...