Relay Modern没有将网络请求发送到GraphQL Server

Question

I just started looking at Relay Modern recently and creating a simple app with a GraphQL backend (which works perfectly fine when testing with GraphIQL). However, I'm running into problems with Relay not sending network requests to retrieve any data. I'm not 100% confident about the below code but I definitely would expect it to at least send a network request to http://localhost:3000/graphql , but the devtools don't show any such request (or server logs).

environment.js

import { Environment, Network, RecordSource, Store } from 'relay-runtime';

const store = new Store(new RecordSource());

const network = Network.create((operation, variables) =>
  fetch('http://localhost:3000/graphql', {
    method: 'POST',
    headers: {
      // Add authentication and other headers here
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      query: operation.text, // GraphQL text from input
      variables,
    }).then(res => res.json()),
  })
);

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

export default environment;

App.jsx

import React, { Component } from 'react';
import { graphql, QueryRenderer } from 'react-relay';

import environment from '@utilities/environment';

class App extends Component {
  render() {
    console.log(this.props); // Empty object {} here

    return (
      <div>
        Hello World!
      </div>
    );
  }
}

const Query = graphql`
  query AppQuery {
    user(id: "u01") {
      id
      username
    }
  }
`;

const AppQuery = () =>
  (<QueryRenderer
    environment={environment}
    graphql={Query}
    variables={{}}
    render={({ error, props }) => {
      console.log(error, props); // Get (undefined, {}) here
      if (error) {
        return <div>{error.message}</div>;
      } else if (props) {
        return <App {...props} />;
      }
      return <div>Loading!</div>;
    }}
  />);

export default AppQuery;

Am I missing something obvious? There are no console/webpack errors and the app renders properly, such as it is, but simply no GraphQL/Relay data. Thanks!

Answer 1

I think your environnement is just fine.

Few things that might help : You might want to create a FragmentContainer and setup/run Relay Compiler to generate the needed graphql files in order to Relay run your queries.

You probably want declare and collocate the data requirements with App through a FragmentContainer. You need a Fragment Container because your data is masked in App hence not available through props ( see more here why it's masked).

You'll need to use createFragmentContainer() like this :

App = createFragmentContainer(
  App,
  graphql`
    fragment App_users on User { // The fragment name should follow the convention <FileName>_<propName>, so maybe you might the App component to an another file.
       user(id: "u01") {
        id
        username
      }
    }
  `,
);

Modify the Query to :

graphql`
  viewer {
    ...App_users_viewer
  }
`

When done, you should be able to run the Relay Compiler and have graphql generated files