Как вы используете результат запроса graphql как возвращаемое значение в функциональном компоненте реагирования? - PullRequest
Новая
       9

Как вы используете результат запроса graphql как возвращаемое значение в функциональном компоненте реагирования?

0 голосов
/ 24 октября 2019

Я новичок, чтобы реагировать, и я запрашиваю конечную точку GRAPHQL и отправляю ей объект json. У меня есть файл с именем Service.jsx с функциональным компонентом, который содержит запрос и возвращает обещание. Эта функция отображается в List.jsx, где я хочу вернуть значение 'id', которое мы получаем из моего запроса. Что мне нужно поместить в блок возврата, чтобы получить идентификатор? Спасибо

Я пробовал инцидент.счет, чтобы получить количество элементов, но не могу получить значения

list.jsx 

     import React, { useEffect, useState } from 'react'
import IncidentService from "services/Service.jsx";



const App = () => {

    const [incidents, setIncidents] = useState([]);


    useEffect(() => {
        var incidentService = IncidentService();
        incidentService.getIncidents()
            .then(result => {
                console.log(result.data.incidentsTop20);
                setIncidents(result.data.incidentsTop20);
            })
    }, [true])

    return <>
        <h1>Count: {incidents.count}</h1>
        /* code to return id should go here */
    </>
}

export default App;

service.jsx 

import React from 'react'


const IncidentService = () => {
    var getIncidents = async () => {

        const query = {
            "query": `
              {
                incidentsTop20 {
                  id

              }
            }`
        }

        const url = "https://localhost:44344/graphql";

        const opts = {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(query)
        };

        var result = await fetch(url, opts)

        var data = await result.json()

        return data;
    }


    return {
        getIncidents: getIncidents
    }
}

export default IncidentService;

1 Ответ

1 голос
/ 24 октября 2019

Что мне нужно поместить в блок возврата, чтобы получить идентификатор?

Учитывая incidents - это список incident с, просто используйте map() для итерацииза инцидент.ид. 

const getTimes = (incident) => (incident.map(i => (<span>i.time</span>)))

return (
  <>
    <h1>Count: {incidents.length}</h1>
    {incidents.map(incident => (
      <span>{incident.id}</span>
      {getTimes(incident.incident)}
    )}
  </>
)
...