reactjs ошибка при использовании API-интерфейса graphql - PullRequest
Новая
       76

reactjs ошибка при использовании API-интерфейса graphql

0 голосов
/ 19 февраля 2020

Попытка использовать API GraphQl в приложении js. не уверен, является ли этот подход правильным или нет. 

import React, { Component } from 'react'
import "./styles.css";
import axios from 'axios';

const appBaseUrl = axios.create({
  baseURL: 'http://localhost:8099/graphql'
});

const tagslist = ` {
  getTags
  {
    id
    tagName
    tagDesc
    tagVersion
    tagVersion
  }
}
`;

class TagsController extends React.Component {
  constructor(props) {
    super(props);
    this.state = { tags: []};
    this.headers = [
      { key: "id", label: "Tag Id" },
      { key: "tagName", label: "Tag Name" },
      { key: "tagDesc", label: "Tag Description" },
      { key: "tagVersion", label: "Tag Version" }
    ];
  }

  componentDidMount() {
    appBaseUrl
      .post('', { query: tagslist })
      .then(result =>
        this.setState(() => ({
          tags: result
        })),
      );
  }

  render() {
    console.log("...... url builder ......")
    const { tags } = this.state;
    return (
      <table border ="1">
        <thead>
        <tr>
                    {
                        this.headers.map(function(h) {
                            return (
                                <th key = {h.key}>{h.label}</th>
                            )
                        })
                    }
                    </tr>
        </thead>
        <tbody>
          {tags &&
            tags.data &&
            tags.data.getTags.map(function(item, key) {
              return (
                <tr key={key}>
                  <td>{item.id}</td>
                  <td>{item.tagName}</td>
                  <td>{item.tagDesc}</td>
                  <td>{item.tagVersion}</td>
                </tr>
              );
            })}
        </tbody>
      </table>
    );
  }
}

export default TagsController;

Здесь исключение ниже.

× Необработанное отклонение (TypeError): Невозможно прочитать свойство 'map' из неопределенного 

TagsController.render
  src/TagsController.js:59
  56 | }
  57 | </tr>
  58 |    </thead>
  59 |    <tbody>
     | ^  60 |      {tags &&
  61 |        tags.data &&
  62 |        tags.data.getTags.map(function(item, key) {
View compiled
▶ 18 stack frames were collapsed.
(anonymous function)
src/TagsController.js:35
  32 | 
  33 | componentDidMount() {
  34 |   appBaseUrl
  35 |     .post('', { query: tagslist })
     | ^  36 |     .then(result =>
  37 |       this.setState(() => ({
  38 |         tags: result

Исключительный ответ от API, как показано ниже. 

{
    "data": {
        "getTags": [
            {
                "id": "ef718cce-1269-4fbd-827c-832f7824c025",
                "tagName": "Veera6",
                "tagDesc": "Test Tag6",
                "tagVersion": 0
            },
            {
                "id": "0cda5ae9-e287-4666-804a-03f25e642d1f",
                "tagName": "Veera9",
                "tagDesc": "Test Tag9",
                "tagVersion": 0
            },
            {
                "id": "31f8f042-dbc0-4dbf-ada8-b94c7e2d2a39",
                "tagName": "Veera8",
                "tagDesc": "Test Tag8",
                "tagVersion": 0
            },
            {
                "id": "6292054c-8bfc-4d2d-b2f8-92e2bac5a578",
                "tagName": "Veera7",
                "tagDesc": "Test Tag7",
                "tagVersion": 0
            },
            {
                "id": "c6756e5c-8fa5-40a9-ab92-5242bda97de3",
                "tagName": "Veera10",
                "tagDesc": "Test Tag10",
                "tagVersion": 0
            }
        ]
    }
}

В основном я пытаюсь использовать API-интерфейс запроса graphql и отображать список результатов с приложением реагировать js, но получаю ошибка, как указано выше. Похоже, я что-то упускаю, когда использую API-интерфейс graphql и создаю параметр запроса graphql

, любая помощь действительно полезна.

1 Ответ

0 голосов
/ 19 февраля 2020

tags в состоянии не будет array, пока запрашиваются данные. Вам нужно добавить еще одно условие для отображения сообщения о загрузке при запросе данных. 

componentDidMount() {
this.setState(() => ({ loading: true }))
    appBaseUrl
      .post('', { query: tagslist })
      .then(result =>
        this.setState(() => ({
          tags: result,
          loading: false
        })),
      );
  }

render() {
    console.log("...... url builder ......")
    const { tags, loading } = this.state;

    if (loading) {
      return "Loading data..."
    }
}

Вы можете найти много идей по Inte rnet, например: http://nikolay.rocks/2017-06-18-better-redux-loading

...