Подождите, пока данные Fetch Promise станут доступны, и перейдите к реагированию на собственный компонент, используя Typescript TSX - PullRequest
Новая
       26

Подождите, пока данные Fetch Promise станут доступны, и перейдите к реагированию на собственный компонент, используя Typescript TSX

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

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

Я знаю, что моя конечная точка работает, но, кажется, fetch сейчас выдаёт мне странную внутреннюю ошибку сервера.

До того, как я получил данные. Я в основном потерял при получении данных в машинописи и использовании данных в машинописи. Дайте мне знать, если у кого-то есть предложения о других способах сделать это. 

const wait = (ms) => new Promise(res => setTimeout(res, ms));


// TODO: figure out how get vars in here
async function getWorkerProfileData(searchQuery) {
    let graphQuery = `
        example
    `

    fetch("https://www.XXXX.com/graphql?query=" + graphQuery).then(function(response) {
        console.log("ONE")
        let myData = response.json();

        /*
        RETURNS THIS
        Object {
        "errors": Array [
            Object {
            "category": "internal",
            "locations": Array [
                Object {
                "column": 20,
                "line": 3,
                },
            ],
            "message": "Internal server error",
            },
        ],
        }
        */
        console.log(response.json())
        return myData;
    }).then(function(json) {
        console.log("tasdfasdfasdfasdf")
        console.log(json);
        return json;
    });
}

const worker = getWorkerProfileData( "d29ya2VyOjI0ODE")

const GetWorkerProfile = <Props, State, worker > ({searchQuery}) => (
    <Container>
        { console.log("DATA COMES BACK LIKE THIS: ", worker) }
        /*
        worker:  Promise {
            "_40": 0,
            "_55": null,
            "_65": 0,
            "_72": null,
        }
        */

        <Content>
            <List>
                <View>
                    <Content>
                        <Header
                            subheader={ "test"  }
                            content={ "test"  }
                        />
                    </Content>
                </View>
            </List>
        </Content>
    </Container>
);

export default GetWorkerProfile;
...