Javascript 继电器现代isn'；t向GraphQL服务器发送网络请求

我最近刚开始研究Relay Modern，并创建了一个带有GraphQL后端的简单应用程序（在使用GraphIQL进行测试时，它工作得非常好）。然而，我遇到了中继不发送网络请求来检索任何数据的问题。我对下面的代码没有100%的信心，但我肯定希望它至少向

http://localhost:3000/graphql

，但devtools不显示任何此类请求（或服务器日志）

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;

import React，{Component}来自'React'；
从“反应继电器”导入{graphql，QueryRenderer}；
从“@utilities/environment”导入环境；
类应用程序扩展组件{
render（）{
console.log（this.props）；//此处为空对象{}
返回(
你好，世界！
);
}
}
const Query=graphql`
查询应用程序查询{
用户（id:“u01”）{
身份证件
用户名
}
}
`;
常量AppQuery=（）=>
( {
log（错误，道具）；//此处获取（未定义，{}）
如果（错误）{
返回{error.message}；
}否则如果（道具）{
返回；
}
返回装载！；
}}
/>);
导出默认AppQuery；

---

我错过了什么明显的东西吗？没有控制台/网页包错误，应用程序正确呈现，但没有GraphQL/Relay数据。谢谢

我认为你们的环境很好

有几件事可能会有所帮助：您可能需要创建一个FragmentContainer并设置/运行以生成所需的graphql文件，以便中继运行查询

您可能希望通过一个碎片容器将数据需求与应用程序声明并并置。您需要一个片段容器，因为您的数据在应用程序中被屏蔽，因此无法通过道具使用（这里是屏蔽的原因）

您需要像这样使用：

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

---

完成后，您应该能够运行中继编译器并生成graphql文件

我认为您的环境很好

有几件事可能会有所帮助：您可能需要创建一个FragmentContainer并设置/运行以生成所需的graphql文件，以便中继运行查询

您可能希望通过一个碎片容器将数据需求与应用程序声明并并置。您需要一个片段容器，因为您的数据在应用程序中被屏蔽，因此无法通过道具使用（这里是屏蔽的原因）

您需要像这样使用：

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

完成后，您应该能够运行中继编译器并生成graphql文件