Relay: [Modern] Not passing props down to render function

[st0ffern]

Relay does send a request and get a response will full data from server, but when render function is calles there is no data..

Example code:

PS:

• I am using a classic Relay.RelayNetworkLayer
• babelrc = ["relay", {"compat": true, "schema": "schema/schema.graphql"}],

import Relay from 'react-relay/classic'
import {createFragmentContainer, graphql, QueryRenderer} from 'react-relay/compat'

EditProfile = createFragmentContainer(EditProfile, graphql`
  fragment EditProfile_query on Viewer {
    user{
        id
        firstName
        lastName
        gender
        email
        profileImage{
            url
        }
    }
  }
`)


export default class EditProfileWrapper extends Component{
    render(){
        return (
            <QueryRenderer
            environment={Relay.Store}
            query={graphql`
              query EditProfileWrapperQuery {
                viewer {
                  ...EditProfile_query
                }
              }
            `}
            variables={{}}
            render={({error, props}) => {
              if (error)  this.props.userActions.logout()
              else if (props) return <EditProfile user={this.props.viewer.user} />
              else return <EditProfile query={null} />
            }}
          />
        )       
    }
}

[eugene1g]

Relay fragments are named with the convention of "$fileName_$propName". For example, when you have a fragment EditProfile_query, it declares that the component wants a prop query with the data shape as declared in the graphql tag.

In the QueryRenderer, the custom render function is responsible for correctly passing Relay data props to all its children. So can you try return <EditProfile query={this.props.viewer} /> and within EditProfile access this.props.query.user to see if that gets you the expected user object?

[st0ffern]

@eugene1g thanks for the response..

Cannot read property 'user' of null

I have tested pretty much all, if i do console log in the render function:

render={({error, props}) => {
  console.log(props)
  if (error)  this.props.userActions.logout()
  else if (props) return <EditProfile user={this.props.viewer.user} />
  else return <EditProfile query={null} />
}}

it returns the fragments and not the query response. The viewer object is empty.

[eugene1g]

Right now your render function user this.props.viewer.user which refers to the props of EditProfileWrapper rather than the data props provided by Relay into the QueryRenderer render function.

Try something like this -

render={({error, relayProps}) => {
  console.log(relayProps) // <-- this should be { viewer: { user: { id, firstname, ... } } }
  if (error)  this.props.userActions.logout()
  else if (relayProps) return <EditProfile query={relayProps.viewer} />
  else return <EditProfile query={null} />
}}

// .. in EditProfile
class EditProfile extends React.Component {
    render() {
      console.log(this.props)
      if(!this.props.query) return null;
      return (<div>{this.props.query.user.firstname}</div>)
    }
}

[st0ffern]

just what i did.
Let me create a reproduction repo of the problem...

[st0ffern]

My bad after 2 days i finally see that the render function in QueryRenderer does not print any props...
You need to pass them down to the containers in order to see the data.

Closing this issue

[baig]

@stoffern I am running into the same issue. How did you solve it?

[mengfoobar]

@baig

Basically his problem was that he was querying on viewer, but passed in viewer.user to the fragmentContainer . At the render function in QueryRenderer, you'll have to pass in props.viewer instead of props.viewer.user as the fragmentContainer only expects the viewer.

So essentially he fixed it by changing this line:

      else if (props) return <EditProfile user={this.props.viewer.user} />

to

      else if (props) return <EditProfile user={this.props.viewer} />

in the render function of the QueryRenderer.

Hopefully this helps.