CODEWITHSUNDEEP
javascriptgraphqlrelaymodern
Ashley Aitken
Ashley Aitken

Reputation: 2529

Why are Relay Modern QueryRenderer render props undefined?

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 (e.g. 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

Upvotes: 2

Views: 1246

Answers (1)

Ng Thong
Ng Thong

Reputation: 104

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);
  })
);

Upvotes: 1

Related Questions