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 。