GraphQL Query с использованием Graphcool не отображается на экране

Question

Я пробую Graphcool. Я сталкиваюсь с проблемами, пытаясь отобразить содержимое в представлении. Ниже приведены коды... Я скачал шаблон, предоставленный Graphcool. Вместо отображения содержимого в ListView, я хочу вместо этого отобразить его в FlatList. Сообщение не было отображено на экране. конечная точка верна. Кто-нибудь может посоветовать, где я мог пойти не так? Спасибо

App.js

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { ApolloProvider } from "react-apollo";
import { ApolloClient, HttpLink, InMemoryCache } from "apollo-client-preset";
import AllScreen from "./components/AllScreen";

// __SIMPLE_API_ENDPOINT__ looks like: 'https://api.graph.cool/simple/v1/__SERVICE_ID__'
const httpLink = new HttpLink({
  uri: "CORRECT LINK PROVIDED BY AUTHOR"
});

const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache()
});

export default class App extends React.Component {
  render() {
    return (
      <ApolloProvider client={client}>
        <AllScreen />
      </ApolloProvider>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

AllScreen.js

import React from "react";
import Post from "./Post";
import { graphql } from "react-apollo";
import gql from "graphql-tag";
import {
  View,
  TouchableHighlight,
  ListView,
  Modal,
  StyleSheet,
  Text,
  FlatList
} from "react-native";
import CreatePage from "./CreatePage";

const allPostsQuery = gql`
  query {
    allPosts {
      id
      title
    }
  }
`;

class AllScreen extends React.Component {
  constructor(props) {
    super(props);
    // const ds = new ListView.DataSource({
    //   rowHasChanged: (r1, r2) => r1 !== r2
    // });
    this.state = {
      // dataSource: ds.cloneWithRows([]),
      modalVisible: false,
      user: undefined
    };
  }

  componentDidMount() {
    console.log("PROPS", this.props.allPostsQuery);
  }

  // componentWillReceiveProps(nextProps) {
  //   if (!nextProps.allPostsQuery.loading && !nextProps.allPostsQuery.error) {
  //     const { dataSource } = this.state;
  //     this.setState({
  //       dataSource: dataSource.cloneWithRows(nextProps.allPostsQuery.allPosts)
  //     });
  //   }
  // }

  render() {
    if (this.props.allPostsQuery.loading) {
      return <Text>Loading</Text>;
    }

    return (
      <View style={styles.container}>
        <Modal
          animationType="slide"
          transparent={true}
          visible={this.state.modalVisible}
        >
          <CreatePage
            onComplete={() => {
              this.props.allPostsQuery.refetch();
              this.setState({ modalVisible: false });
            }}
          />
        </Modal>

        {/* <ListView
          enableEmptySections={true}
          dataSource={this.state.dataSource}
          renderRow={post => (
            <Post description={post.title} imageUrl={post.imageUrl} />
          )}
        /> */}
        <FlatList
          data={this.props.allPostsQuery}
          renderItem={({ item }) => (
            <View>
              <Text>{item}</Text>
            </View>
          )}
          keyExtractor={item => item}
        />
        <TouchableHighlight
          style={styles.createPostButtonContainer}
          onPress={this._createPost}
        >
          <Text style={styles.createPostButton}>Create Post</Text>
        </TouchableHighlight>
      </View>
    );
  }

  _createPost = () => {
    // this.props.router.push('/create');
    this.setState({ modalVisible: true });
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 22
  },
  createPostButtonContainer: {
    justifyContent: "center",
    alignItems: "center"
  },
  createPostButton: {
    backgroundColor: "rgba(39,174,96,1)",
    color: "white",
    textAlign: "center",
    fontSize: 22,
    height: 60,
    width: 480,
    paddingTop: 18
  }
});

export default graphql(allPostsQuery, { name: "allPostsQuery" })(AllScreen);