Question

我刚刚开始关注Relay Modern并使用GraphQL后端创建一个简单的应用程序（使用GraphIQL进行测试时效果非常好）。但是，我遇到了Relay没有发送网络请求以检索任何数据的问题。我对下面的代码没有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;

我错过了一些明显的东西吗？没有控制台/ webpack错误，应用程序正确呈现，例如它，但根本没有GraphQL /中继数据。谢谢！

Answer 1

我认为你的环境很好。

可能有所帮助的事情：你可能想要创建一个FragmentContainer并设置/运行Relay Compiler来生成所需的graphql文件，以便中继运行你的查询。

您可能希望通过FragmentContainer向App声明和并置数据要求。您需要一个片段容器，因为您的数据在App中被屏蔽，因此无法通过道具（see more这里为什么被屏蔽）。

您需要像这样使用createFragmentContainer()：

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`
  viewer {
    ...App_users_viewer
  }
`

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

Relay Modern不向GraphQL Server发送网络请求

1 个答案: