如何使用 GraphQL 和 React Native 从 GitHub 获取你的名字？

Question

I'm trying to get my GitHub username using GraphQL and React Native. I keep getting the error "Objects are not valid as a React child." I have tried declaring an array and appending the results to that array but then I just get an empty array. Therefore, I'm not 100% sure if I'm fetching the data correctly. I have also tried putting curly braces around mainFunction() as well as every suggested solution I could find on the internet but nothing seems to work. How can I get it working?

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { Navigation } from 'react-native-navigation';
import { ApolloClient } from 'apollo-boost';

var asynchronousFunction = async () => {
  var response = await fetch('https://api.github.com/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'bearer ' + {TOKEN},
    },
    body: '{ "query": "{ viewer { name } } "}',
  });
  return response;
};

var mainFunction = async () => {
  var result = await asynchronousFunction();
  return result;
};

(async () => {
  console.log(await mainFunction());
})();

class Example extends Component {
  render() {
    return (
      <View>
        <Text>{JSON.stringify(mainFunction())}</Text>
      </View>
    );
  }
}

export default Example;

Answer 1

The problem is here

 render() {
    return (
      mainFunction()
    );
  }

The return statement from mainFunction is not a react component so it would always be an object so you should display is inside a Text using JSON stringify Something like below

 render() {
    return (
      <View><Text>{JSON.stringify(mainFunction())}</Text></View>
    );
  }

Still its better to have a state and update it once you get the response which is the best practice when it comes to react