Relay: minimum setup for createFragmentContainer not working

[sajadghawami]

Hey guys,

so i ve been trying to figure this out for quite some time, but nothing seems to work. I am trying to implement a minimum setup for createFragmentContainer with the following parts:

Thats my root-file:

import React, { Component } from 'react';
import { QueryRenderer } from 'react-relay';
import graphql from 'babel-plugin-relay/macro';
import environment from '../../../helpers/Enviroment';
import User from './User';

const GraphQLRootQuery = graphql`
  query GraphQLRootQuery {
    ...User_user
  }
`;

function RenderApp({ error, props }) {
  if (error) {
    return <div>{error.message}</div>;
  } if (props) {
    return (
      <User user={props} />
    );
  }
  return <div>Loading</div>;
}


export default class GraphQLRoot extends Component {
  render() {
    return (
      <QueryRenderer
        environment={environment}
        query={GraphQLRootQuery}
        render={RenderApp}
      />
    );
  }
}

This is my User.relay.js file containing the fragment:

import { createFragmentContainer } from 'react-relay';
import graphql from 'babel-plugin-relay/macro';
import User from './User';

export default createFragmentContainer(User, graphql`
    fragment User_user on Query {
        user(id:"1"){
            firstName
        }
    }
`);

And this is the final User.js

import React, { Component } from 'react';

export default class User extends Component {
  render() {
    console.log('this is empty', this.props.user);
    return (
      <div>
        here
      </div>
    );
  }
}

Checking the network in chrome clearly show me the response as:

{"data":{"user":{"firstName":"Testname"}}}

But the data isn't passed to my User Component. The console.log is showing me the following:

this is empty {__fragments: {…}, __id: "client:root"}

Any help would be very much appreciated - thanks in advance! :)

[sibelius]

can you keep the fragment inside the same component file?

check this https://github.com/entria/entria-fullstack/blob/master/packages/app/src/UserDetail.js#L39

this happens because of data masking, check this talk about it https://robrichard.net/graphql-europe-2018/#1

more resources here https://facebook.github.io/relay/docs/en/next/community-learning-resources.html

[sajadghawami]

that was easier than expected... thanks!