relay: [Modern rc.3] fragment data is null when using createFragmentContainer

in my posts.js file I have the QueryRenderer that passes the props to the child postLists component.

     <QueryRenderer
           environment={environment}
             query={GetAllPosts}
            render={({error, props}) => {
              if(props) {
                console.log(props.viewer)
                return <PostList posts={props.viewer}/>
              }

             return <Text style={{marginTop:20}}>Loading...</Text>
         }
        }/>

this is the post_list.js

  class PostList extends Component {
    render () {
       return (
       <View>
          {this.renderPosts(this.props.posts)}
       </View>
     )
   }
   renderPosts(posts) {
     if(!posts) {
        return <Text>No Posts</Text>
      }
     return posts.edges.map(post=>{
     return <PostItem post={post.node}/>
    })
   }
}

  export default createFragmentContainer(
    PostList,
    graphql`
    fragment post_list_posts on postEdges {
      node {
        ...post_item_post
      }
    }
  `
)

and the post_item.js

  class PostItem extends React.Component {
    render() {
      const post = this.props.post;
       return (
         <View>
           <Text>{post.content}</Text>
        </View>
      )
  }
}

 export default createFragmentContainer(
    PostItem,
    graphql`
       fragment post_item_post on postNode {
       Id
       content
      }
   `
  )

and finally the query itself,

    export default graphql`
      query getPostsQuery {
      viewer {
         edges {
             ...post_list_posts
         }
     }
  }
 `

Now when I console.log (props.viewer) I get

      { edges: 
   [ { __fragments: { post_list_posts: {} },
       __id: 'client:root:viewer:edges:0' },
     { __fragments: { post_list_posts: {} },
       __id: 'client:root:viewer:edges:1' },
     { __fragments: { post_list_posts: {} },
       __id: 'client:root:viewer:edges:2' },
     { __fragments: { post_list_posts: {} },
       __id: 'client:root:viewer:edges:3' },
     { __fragments: { post_list_posts: {} },
       __id: 'client:root:viewer:edges:4' } ] }

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 17 (2 by maintainers)

Most upvoted comments

@saudpunjwani101 the render function of QueryRenderer does not print data, it only prints the containers In order to see the data that it fetched with Relay, you need to pass it down atleast one container to see the data.

PS: Make shure you pass it down correct, else you will not see any.