Запрос правильный, но получение «неопределенных» данных

Доп, ребята. Я изучаю Apollo GraphQL с React, и я только что сделал проект, использующий и открывающий API (только с использованием GET). Столкнувшись с моей последней проблемой, прежде чем я смогу развернуть свое приложение: «неопределенные» данные, когда я пытаюсь ПОЛУЧИТЬ, используя идентификатор (Int).

Репозиторий на гитхабе: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.info(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.info(error)



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

                //undefined :(

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

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

Можете ли вы поделиться своим кодом?

— 01.04.2019 15:45

@marktani github.com/akzeitions/реактбир, спасибо.

— 02.04.2019 00:59

Пожалуйста, отредактируйте свой вопрос, указав именно тот код, который имеет значение.

— 02.04.2019 17:07

@marktani извините, отредактировано вместе с классом :)!

— 02.04.2019 22:02

graphql axios apollo react-apollo

29.03.2019 07:38

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Что такое Apollo Client и зачем он нужен?

Apollo Client - это полнофункциональный клиент GraphQL для JavaScript-приложений, который упрощает получение, управление и обновление данных в...

507

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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
              });
        }
     },

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

Я использовал другой подход, но это помогло, спасибо.

— 07.04.2019 05:53

03.04.2019 19:25