GraphQL + Relay現代片段為我提供了一系列空帖

Question

我正在使用Relay modern，GraphQL和Graphcool開發React Native應用程序。 我正在嘗試從數據庫中獲取帖子，並且我有3個文件，Post.js，PostList和index.js。

PostList.js：

export default createFragmentContainer(PostList, graphql`
  fragment PostList_viewer on Viewer {
    allPosts(last: 100, orderBy: createdAt_ASC) @connection(key: "PostList_allPosts", filters: []) {
      edges {
        node {
          ...Post_post
        }
      }
    }
  }
`)

Post.js

export default createFragmentContainer(Post, graphql`
  fragment Post_post on Post {
    id
    content
    createdAt
    author {
      id
      username
    }
  }
`)

index.js

const Feed = () => (
  <QueryRenderer
    environment={environment }
    query={AllPostQuery}
    render={({ error, props }) => {
      if (error) {
        return <div>{error.message}</div>
      } else if (props) {
        return <PostList viewer={props.viewer} />
      }
      return <Text>Loading</Text>
    }}
  />
)

當我控制台日志this.props.viewer.allPosts內PostList.js我得到{ edges: [ null, null, null ], ... 。 我在數據庫中有3個帖子，所以它正在查找這些帖子，但是為什么它們為空？ l

Answer 1

首先，如果遇到問題，請嘗試記錄“根”對象，該對象不是props的分支，而不是其內部的分支-這將使您更容易迷失數據結構。

而且，據我所知，Relay做了一些魔術，使數據僅在定義了片段的文件中對您可用，因此在PostList.js中，您將看不到帖子的詳細信息。 嘗試從Post.js打印數據。 這可能是您看到打印null值的原因。

來自GraphQL的數據也將在_ （下划線）后從片段名稱派生的變量名稱下供您使用，因此在您的示例中，它將不是post allPosts 。