为什么Relay Modern QueryRenderer渲染道具未定义？

Question

This is my first attempt at using Relay Modern. Fetching for a specific User from a PostgraphQL GraphQL Server . It is fetching the data successfully but not passing to render function:

import {createFragmentContainer, QueryRenderer, graphql} from 'react-relay'
import environment from 'environment'

@CSSModules(styles) export default class Profile extends Component {   
  render() {
    var {props: {children}} = this
    return (
      <QueryRenderer
        environment={environment}
        query={graphql`
          query ProfileQuery {
            userById(id: "f0301eaf-55ad-46db-ac90-b52d6138489e") {
              firstName
              userName
            }
          }
        `}
        render={({error, relayProps}) => {
          if (error) {
            return <div>{error.message}</div>
          } else if (relayProps) {
            ...
          }
          return <div>Loading...</div>
        }}
      />
    )   
  }
} 

Only "Loading..." is rendered.

I am guessing because it successfully fetches data that the graphql server and environment are ok.

I am not using React 16 and the project also uses Redux.

Any suggestions please as to why relayProps wouldn't have a value (eg relayProps.user)?

One further thing that may help, the environment (file) is in the main application and the QueryRenderer and components are in an imported npm package (to be shared across a number of applications). As mentioned, the query seems to work fine so I did not think this was a problem. I also run the relay compiler on the package but not the main application since there are no relay components there.

Just in case it's needed the environment is setup using:

const {
  Environment,
  Network,
  RecordSource,
  Store,
} = require('relay-runtime')

// Instantiate Store for Cached Data
const store = new Store(new RecordSource())

// Create Network for GraphQL Server
const network = Network.create((operation, variables) => {
  // GraphQL Endpoint
  return fetch(config.gqlapiProtocol + "://" + config.gqlapiHost + config.gqlapiUri + "/a3/graphql" , {
    method: 'POST',
    headers: {
      'Content-Type': "application/json",
      'Accept': 'application/json',
    },
    body: JSON.stringify({
      query: operation.text,
      variables,
    }),
  }).then(response => {
    return response.json()
  })
})

// Instantiate Environment
const environment = new Environment({
  network,
  store,
})

// Export environment
export default environment

Answer 1

props are not relayprops

    render={({ error, props }) => {
      if (error) {
        return <div>{error.message}</div>;
      } else if (props) {
        ...
      }
      return <div>Loading...</div>;
    }}

and

fetch(GRAPHQL_URL, {
  method: 'POST',
  get headers() {
    return {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
    };
  },
  body: JSON.stringify({
    query: operation.text, // GraphQL text from input
    variables
  })
})
  .then(response => response.json())
  .then((json) => {
    // https://github.com/facebook/relay/issues/1816
    if (operation.query.operation === 'mutation' && json.errors) {
      return Promise.reject(json);
    }

    return Promise.resolve(json);
  })
);